Skiff Pages

​

Key Features

​

Editor Features

​

Text Formatting

​

Advanced Content

​

Tables

• Insert tables with custom rows and columns
• Merge and split cells
• Table headers with distinct styling
• Row and column operations (insert, delete, move)
• Cell background colors
• Resize columns and rows
• Table borders and styling

// Table implementation in skiff-prosemirror
import { TableNodeSpec } from 'skiff-prosemirror';
import { tableEditing, columnResizing } from '@skiff-org/prosemirror-tables';

// Supported table operations:
- addColumnBefore / addColumnAfter
- addRowBefore / addRowAfter
- deleteColumn / deleteRow
- mergeCells / splitCell
- setCellBackgroundColor

​

Images

• Upload images from local files
• Drag and drop image insertion
• Resize images within documents
• Image alignment options
• Alt text for accessibility
• Encrypted image storage

​

Links

• Insert links to external URLs
• Link to other Skiff documents
• Edit link URLs and display text
• Remove links
• Link tooltip preview
• Automatic link sanitization for security

​

Math and Special Content

• Mathematical equations (LaTeX support)
• File embeds from Skiff Drive
• Bookmarks for internal references
• Mentions for user collaboration
• Placeholders for dynamic content

​

ProseMirror Architecture

​

Core Libraries

// ProseMirror core packages
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { Schema, Node } from 'prosemirror-model';
import { Transform } from 'prosemirror-transform';
import { Plugin } from 'prosemirror-state';

​

Skiff ProseMirror Extensions

• DocNodeSpec: Root document node
• ParagraphNodeSpec: Standard paragraphs
• HeadingNodeSpec: H1-H6 headings
• BlockquoteNodeSpec: Quote blocks
• CodeBlockNodeSpec: Code with syntax highlighting
• BulletListNodeSpec / OrderedListNodeSpec: Lists
• ListItemNodeSpec: List items
• TaskItemNodeSpec: Checkbox items
• TodoListNodeSpec: Task lists
• TableNodesSpecs: Table, row, cell, header
• ImageNodeSpec: Inline and block images
• HorizontalRuleNodeSpec: Dividers
• MathNodeSpecs: Mathematical equations
• FileEmbedNodeSpec: Drive file embeds
• MentionNodeSpec: User mentions

• StrongMarkSpec: Bold text
• EMMarkSpec: Italic text
• TextUnderlineMarkSpec: Underline
• StrikeMarkSpec: Strikethrough
• CodeMarkSpec: Inline code
• LinkMarkSpec: Hyperlinks
• TextColorMarkSpec: Text color
• TextHighlightMarkSpec: Background highlighting
• FontSizeMarkSpec: Font size
• FontTypeMarkSpec: Font family
• TextSelectionMarkSpec: Selection highlights
• TextSuperMarkSpec: Superscript
• SpacerMarkSpec: Spacing control

​

Editor Plugins

• EditorPageLayoutPlugin: Page layout and formatting
• ContentPlaceholderPlugin: Show placeholder text
• CursorPlaceholderPlugin: Cursor state management
• LinkTooltipPlugin: Link preview tooltips
• SelectPlugin: Advanced selection handling
• LocalstorageCleanerPlugin: Clean up local storage
• TablePlugins: Table editing capabilities

​

Input Rules

// Examples of input rules
- Type "# " for Heading 1
- Type "## " for Heading 2
- Type "- " or "* " for bullet list
- Type "1. " for numbered list
- Type "[]" for task list
- Type "---" for horizontal rule
- Type "> " for blockquote

​

Document Encryption

​

Encryption Flow

1. Edit Document: User edits in ProseMirror editor
2. Serialize to JSON: Document state serialized to JSON
3. Encrypt Content: JSON encrypted with document key
4. Encrypt Metadata: Title and other metadata encrypted separately
5. Store Encrypted: Encrypted data uploaded to server
6. Decrypt on Load: Document decrypted when opened

​

Encryption Libraries

import { 
  encryptSymmetric, 
  decryptSymmetric,
  generateSymmetricKey 
} from 'skiff-crypto';

// Document encryption datagram
import { createJSONWrapperDatagram } from 'skiff-crypto';
const DocumentDatagram = createJSONWrapperDatagram('ddl://skiff/document');

​

Version History

• Every save creates a new encrypted version
• Previous versions fully encrypted
• Restore to any previous version
• Compare versions side-by-side
• Version history retention based on plan

​

Collaboration Features

​

Real-Time Sync

• Operational Transformation: Changes are synchronized using OT
• Conflict Resolution: Automatic conflict resolution for concurrent edits
• Presence Indicators: See other users’ cursors and selections
• Comment System: Add comments on document sections
• Change Tracking: View who made which changes

​

Sharing and Permissions

​

Tiptap Integration

// Tiptap packages used
import { Editor } from '@tiptap/core';
import { Bold } from '@tiptap/extension-bold';
import { Italic } from '@tiptap/extension-italic';
import { Underline } from '@tiptap/extension-underline';
import { Strike } from '@tiptap/extension-strike';
import { Link } from '@tiptap/extension-link';
import { Image } from '@tiptap/extension-image';
import { Table } from '@tiptap/extension-table';
import { TableRow } from '@tiptap/extension-table-row';
import { TableCell } from '@tiptap/extension-table-cell';
import { TableHeader } from '@tiptap/extension-table-header';
import { BulletList } from '@tiptap/extension-bullet-list';
import { OrderedList } from '@tiptap/extension-ordered-list';
import { ListItem } from '@tiptap/extension-list-item';
import { Blockquote } from '@tiptap/extension-blockquote';
import { Code } from '@tiptap/extension-code';
import { Heading } from '@tiptap/extension-heading';
import { HorizontalRule } from '@tiptap/extension-horizontal-rule';
import { HardBreak } from '@tiptap/extension-hard-break';
import { Highlight } from '@tiptap/extension-highlight';
import { Color } from '@tiptap/extension-color';
import { TextAlign } from '@tiptap/extension-text-align';
import { TextStyle } from '@tiptap/extension-text-style';
import { Placeholder } from '@tiptap/extension-placeholder';
import { History } from '@tiptap/extension-history';
import { Dropcursor } from '@tiptap/extension-dropcursor';

​

Import and Export

​

Supported Formats

​

Google Docs Import

// Import HTML from Google Docs
import { convertFromHTML } from 'skiff-prosemirror';

const doc = convertFromHTML(googleDocsHTML, schema);

​

Markdown Export

// Export to markdown
import { markdownExport } from 'skiff-prosemirror/markdownExport';

const markdown = markdownExport(doc);

​

Keyboard Shortcuts

⌘B / Ctrl+B         Bold
⌘I / Ctrl+I         Italic
⌘U / Ctrl+U         Underline
⌘⇧X / Ctrl+Shift+X  Strikethrough
⌘E / Ctrl+E         Inline code
⌘K / Ctrl+K         Insert link

⌘⌥1 / Ctrl+Alt+1    Heading 1
⌘⌥2 / Ctrl+Alt+2    Heading 2
⌘⌥0 / Ctrl+Alt+0    Paragraph
⌘⇧7 / Ctrl+Shift+7  Ordered list
⌘⇧8 / Ctrl+Shift+8  Bullet list
⌘⇧9 / Ctrl+Shift+9  Task list

⌘Z / Ctrl+Z         Undo
⌘⇧Z / Ctrl+Shift+Z  Redo
⌘S / Ctrl+S         Save
⌘P / Ctrl+P         Print
⌘F / Ctrl+F         Find
Tab                 Indent
Shift+Tab           Outdent

​

Mobile Editing

• Touch-optimized toolbar
• Mobile-friendly keyboard shortcuts
• Gesture support for selection
• Offline editing with sync
• Native mobile apps

​

Technical Implementation

​

Source Code Structure

libs/skiff-prosemirror/src/
├── EditorSchema.ts          # Document schema definition
├── EditorNodes.ts           # Node type registry
├── EditorMarks.ts           # Mark type registry
├── EditorPlugins.ts         # Plugin initialization
├── EditorCommands.ts        # Command implementations
├── EditorKeyMap.ts          # Keyboard shortcuts
├── commands/                # Command logic
├── plugins/                 # Custom plugins
├── schema/                  # Schema definitions
├── ui/                      # UI components
├── pasteHandlers/           # Paste handling
├── inputRules/              # Input rule definitions
├── markdownExport/          # Markdown export logic
├── floatingToolbar/         # Formatting toolbar
├── slashMenu/               # Slash command menu
├── mentionsMenu/            # User mention autocomplete
├── comments/                # Comment system
└── utils/                   # Utility functions

​

Custom Commands

• HeadingCommand: Convert to heading
• TextColorCommand: Change text color
• TextHighlightCommand: Highlight text
• FontSizeCommand: Adjust font size
• FontTypeCommand: Change font family
• TextAlignCommand: Set text alignment
• IndentCommand: Indent/outdent
• TableInsertCommand: Insert table
• TableMergeCellsCommand: Merge table cells
• ImageInsertCommand: Insert image
• LinkSetURLCommand: Create/edit link
• MathInsertCommand: Insert math equation

​

Privacy and Security

​

Zero-Knowledge Editing

• All content encrypted before leaving device
• Server cannot read document contents
• Private keys remain on client devices
• Encrypted collaboration using shared keys

​

Secure Sharing

• Share links with encryption keys in URL fragment
• Optional password protection for shares
• Expiring access links
• Revocable permissions

​

Getting Started

​

Learn More

• ProseMirror Documentation
• Tiptap Guide
• Skiff ProseMirror Source
• Skiff Crypto Library