@eventuras/scribo 0.8.3 → 0.10.7

package/src/MarkdownInput.tsx

@@ -1,11 +1,13 @@
 'use client';
-import MarkdownEditor from './MarkdownEditor';
 import { useRef, useState } from 'react';
+import MarkdownEditor from './MarkdownEditor';
+import type { ScriboPlugin } from './types';
 
 export type MarkdownInputProps = {
   id?: string;
   name: string;
   maxLength?: number;
+  plugins?: ScriboPlugin[];
   label?: string;
   placeholder?: string;
   defaultValue?: string;
@@ -28,7 +30,7 @@ const MarkdownInput = (props: MarkdownInputProps) => {
   const plainTextRef = useRef('');
   const id = props.id ?? props.name;
 
-  const handleChange = (markdown: string, { plainText }: { plainText: string; }) => {
+  const handleChange = (markdown: string, { plainText }: { plainText: string }) => {
     plainTextRef.current = plainText;
     setValue(markdown);
 
@@ -37,9 +39,9 @@ const MarkdownInput = (props: MarkdownInputProps) => {
       props.onChange(markdown);
     }
 
-    // Validate maxLength if provided
-    if (props.maxLength && plainText.length >= props.maxLength) {
-      setError(`Maximum ${props.maxLength} characters allowed`);
+    // Validate maxLength against markdown content (what gets stored)
+    if (props.maxLength && markdown.length > props.maxLength) {
+      setError(`Maximum ${props.maxLength} characters allowed (currently ${markdown.length})`);
     } else {
       setError(null);
     }
@@ -53,14 +55,11 @@ const MarkdownInput = (props: MarkdownInputProps) => {
         </label>
       )}
       {/* Hidden input to store value - controlled by React state */}
-      <input
-        type="hidden"
-        name={props.name}
-        value={value}
-      />
+      <input type="hidden" name={props.name} value={value} />
       <MarkdownEditor
         onChange={handleChange}
         className={props.editorClassName}
+        plugins={props.plugins}
         initialMarkdown={props.defaultValue}
         placeholder={props.placeholder}
         data-testid={props['data-testid']}

package/src/context/SharedHistoryContext.tsx

@@ -6,12 +6,11 @@
  *
  */
 
-import type {HistoryState} from '@lexical/react/LexicalHistoryPlugin';
-import type {JSX} from 'react';
-
-import {createEmptyHistoryState} from '@lexical/react/LexicalHistoryPlugin';
-import * as React from 'react';
-import {createContext, ReactNode, useContext, useMemo} from 'react';
+import type { HistoryState } from '@lexical/react/LexicalHistoryPlugin';
+import { createEmptyHistoryState } from '@lexical/react/LexicalHistoryPlugin';
+import type * as React from 'react';
+import type { JSX } from 'react';
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
 
 type ContextShape = {
   historyState?: HistoryState;
@@ -19,18 +18,11 @@ type ContextShape = {
 
 const Context: React.Context<ContextShape> = createContext({});
 
-export const SharedHistoryContext = ({
-  children,
-}: {
-  children: ReactNode;
-}): JSX.Element => {
-  const historyContext = useMemo(
-    () => ({historyState: createEmptyHistoryState()}),
-    [],
-  );
+export const SharedHistoryContext = ({ children }: { children: ReactNode }): JSX.Element => {
+  const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);
   return <Context.Provider value={historyContext}>{children}</Context.Provider>;
 };
 
 export const useSharedHistoryContext = (): ContextShape => {
   return useContext(Context);
-};
+};

package/src/main.tsx

@@ -1,6 +1,6 @@
-
 import './MarkdownEditor.css';
-import MarkdownEditor from "./MarkdownEditor";
-import MarkdownInput from "./MarkdownInput";
+import MarkdownEditor from './MarkdownEditor';
+import MarkdownInput from './MarkdownInput';
 
+export type { ScriboPlugin, ScriboToolbarButton } from './types';
 export { MarkdownEditor, MarkdownInput };

package/src/nodes/EditorNodes.ts

@@ -7,16 +7,16 @@
  * Modified from: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/PlaygroundNodes.ts
  */
 
-import { CodeHighlightNode, CodeNode } from "@lexical/code";
-import { HashtagNode } from "@lexical/hashtag";
-import { AutoLinkNode, LinkNode } from "@lexical/link";
-import { ListItemNode, ListNode } from "@lexical/list";
-import { MarkNode } from "@lexical/mark";
-import { OverflowNode } from "@lexical/overflow";
-import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
-import type { Klass, LexicalNode } from "lexical";
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { HashtagNode } from '@lexical/hashtag';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { MarkNode } from '@lexical/mark';
+import { OverflowNode } from '@lexical/overflow';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import type { Klass, LexicalNode } from 'lexical';
 
 // Using 'as any' to work around Lexical version conflicts between workspace installs
 const EditorNodes: Array<Klass<LexicalNode>> = [

package/src/nodes/callout/Callout.css

@@ -0,0 +1,94 @@
+/* Callout container (ElementNode) */
+.callout-editor {
+  position: relative;
+  border-left: 4px solid;
+  border-radius: 0.375rem;
+  padding: 2rem 0.75rem 0.75rem;
+  margin: 0.5rem 0;
+  min-height: 3rem;
+}
+
+.callout-editor--note {
+  border-color: #2563eb;
+  background: rgba(37, 99, 235, 0.06);
+}
+
+.callout-editor--tip {
+  border-color: #16a34a;
+  background: rgba(22, 163, 74, 0.06);
+}
+
+.callout-editor--important {
+  border-color: #7c3aed;
+  background: rgba(124, 58, 237, 0.06);
+}
+
+.callout-editor--warning {
+  border-color: #d97706;
+  background: rgba(217, 119, 6, 0.06);
+}
+
+.callout-editor--caution {
+  border-color: #dc2626;
+  background: rgba(220, 38, 38, 0.06);
+}
+
+/* Toolbar rendered directly inside callout element */
+.callout-toolbar {
+  position: absolute;
+  top: 0.25rem;
+  left: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  user-select: none;
+}
+
+.callout-toolbar-icon {
+  font-size: 0.875rem;
+  line-height: 1;
+}
+
+.callout-toolbar-type {
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.75rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  color: inherit;
+}
+
+.callout-toolbar-type:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.callout-toolbar-remove {
+  margin-left: auto;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: #f7f7f7;
+  cursor: pointer;
+  padding: 0 0.375rem;
+  color: #595959;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition:
+    color 0.15s,
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.callout-toolbar-remove:hover {
+  color: #991b1b;
+  background: #f3e4e4;
+  border-color: rgba(153, 27, 27, 0.35);
+}
+
+/* Content paragraphs inside callout */
+.callout-editor p {
+  margin: 0.25rem 0;
+}

package/src/nodes/callout/CalloutComponent.tsx

@@ -0,0 +1,61 @@
+import './Callout.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createParagraphNode, $getNodeByKey } from 'lexical';
+import { useEffect } from 'react';
+
+import { $isCalloutNode, CALLOUT_TYPES, type CalloutType } from './CalloutNode';
+
+/**
+ * Plugin that listens for DOM custom events from CalloutNode toolbar
+ * and updates the Lexical state accordingly.
+ */
+export const CalloutPlugin = () => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    const rootElement = editor.getRootElement()?.parentElement;
+    if (!rootElement) return;
+
+    const handleTypeChange = (e: Event) => {
+      const { nodeKey, calloutType } = (e as CustomEvent).detail;
+      if (!nodeKey || !CALLOUT_TYPES.includes(calloutType)) return;
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isCalloutNode(node)) {
+          node.setCalloutType(calloutType as CalloutType);
+        }
+      });
+    };
+
+    const handleRemove = (e: Event) => {
+      const { nodeKey } = (e as CustomEvent).detail;
+      if (!nodeKey) return;
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (!$isCalloutNode(node)) return;
+
+        const children = node.getChildren();
+        if (children.length > 0) {
+          for (const child of children) {
+            node.insertBefore(child);
+          }
+          node.remove();
+        } else {
+          const p = $createParagraphNode();
+          node.replace(p);
+          p.selectEnd();
+        }
+      });
+    };
+
+    rootElement.addEventListener('callout-type-change', handleTypeChange);
+    rootElement.addEventListener('callout-remove', handleRemove);
+
+    return () => {
+      rootElement.removeEventListener('callout-type-change', handleTypeChange);
+      rootElement.removeEventListener('callout-remove', handleRemove);
+    };
+  }, [editor]);
+
+  return null;
+};

package/src/nodes/callout/CalloutNode.ts

@@ -0,0 +1,197 @@
+import {
+  $applyNodeReplacement,
+  $createParagraphNode,
+  type DOMConversionMap,
+  type DOMExportOutput,
+  ElementNode,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedElementNode,
+  type Spread,
+} from 'lexical';
+
+export const CALLOUT_TYPES = ['NOTE', 'TIP', 'IMPORTANT', 'WARNING', 'CAUTION'] as const;
+export type CalloutType = (typeof CALLOUT_TYPES)[number];
+
+const CALLOUT_ICONS: Record<CalloutType, string> = {
+  NOTE: 'ℹ️',
+  TIP: '💡',
+  IMPORTANT: '❗',
+  WARNING: '⚠️',
+  CAUTION: '🔴',
+};
+
+export type SerializedCalloutNode = Spread<{ calloutType: CalloutType }, SerializedElementNode>;
+
+export class CalloutNode extends ElementNode {
+  __calloutType: CalloutType;
+
+  static getType(): string {
+    return 'callout';
+  }
+
+  static clone(node: CalloutNode): CalloutNode {
+    return new CalloutNode(node.__calloutType, node.__key);
+  }
+
+  constructor(calloutType: CalloutType = 'NOTE', key?: NodeKey) {
+    super(key);
+    this.__calloutType = calloutType;
+  }
+
+  getCalloutType(): CalloutType {
+    return this.getLatest().__calloutType;
+  }
+
+  setCalloutType(calloutType: CalloutType): void {
+    const self = this.getWritable();
+    self.__calloutType = calloutType;
+  }
+
+  // --- DOM ---
+
+  createDOM(): HTMLElement {
+    const wrapper = document.createElement('div');
+    wrapper.dataset.calloutKey = this.__key;
+    this._applyDOMClass(wrapper);
+
+    // Non-editable toolbar
+    const toolbar = document.createElement('div');
+    toolbar.className = 'callout-toolbar';
+    toolbar.contentEditable = 'false';
+
+    const icon = document.createElement('span');
+    icon.className = 'callout-toolbar-icon';
+    icon.textContent = CALLOUT_ICONS[this.__calloutType];
+    toolbar.appendChild(icon);
+
+    const select = document.createElement('select');
+    select.className = 'callout-toolbar-type';
+    select.setAttribute('aria-label', 'Callout type');
+    for (const type of CALLOUT_TYPES) {
+      const option = document.createElement('option');
+      option.value = type;
+      option.textContent = type.charAt(0) + type.slice(1).toLowerCase();
+      if (type === this.__calloutType) option.selected = true;
+      select.appendChild(option);
+    }
+    select.addEventListener('change', () => {
+      wrapper.dispatchEvent(
+        new CustomEvent('callout-type-change', {
+          bubbles: true,
+          detail: { nodeKey: wrapper.dataset.calloutKey, calloutType: select.value },
+        })
+      );
+    });
+    toolbar.appendChild(select);
+
+    const removeBtn = document.createElement('button');
+    removeBtn.type = 'button';
+    removeBtn.className = 'callout-toolbar-remove';
+    removeBtn.textContent = '×';
+    removeBtn.title = 'Remove callout';
+    removeBtn.setAttribute('aria-label', 'Remove callout');
+    removeBtn.addEventListener('click', () => {
+      wrapper.dispatchEvent(
+        new CustomEvent('callout-remove', {
+          bubbles: true,
+          detail: { nodeKey: wrapper.dataset.calloutKey },
+        })
+      );
+    });
+    toolbar.appendChild(removeBtn);
+
+    wrapper.appendChild(toolbar);
+    return wrapper;
+  }
+
+  private _applyDOMClass(dom: HTMLElement): void {
+    dom.className = `callout-editor callout-editor--${this.__calloutType.toLowerCase()}`;
+  }
+
+  updateDOM(prevNode: CalloutNode, dom: HTMLElement): boolean {
+    if (prevNode.__calloutType !== this.__calloutType) {
+      this._applyDOMClass(dom);
+      const icon = dom.querySelector('.callout-toolbar-icon');
+      if (icon) icon.textContent = CALLOUT_ICONS[this.__calloutType];
+      const select = dom.querySelector('.callout-toolbar-type') as HTMLSelectElement | null;
+      if (select) select.value = this.__calloutType;
+    }
+    return false;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const el = document.createElement('blockquote');
+    el.dataset.calloutType = this.__calloutType;
+    el.className = `callout callout--${this.__calloutType.toLowerCase()}`;
+    return { element: el };
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      blockquote: (node: HTMLElement) => {
+        const type = node.dataset.calloutType;
+        if (!type || !CALLOUT_TYPES.includes(type as CalloutType)) return null;
+        return {
+          conversion: () => ({
+            node: $createCalloutNode(type as CalloutType),
+          }),
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  // --- Serialization ---
+
+  static importJSON(json: SerializedCalloutNode): CalloutNode {
+    return $createCalloutNode(json.calloutType);
+  }
+
+  exportJSON(): SerializedCalloutNode {
+    return {
+      ...super.exportJSON(),
+      type: 'callout',
+      calloutType: this.__calloutType,
+    };
+  }
+
+  // --- Behavior ---
+
+  canIndent(): boolean {
+    return false;
+  }
+
+  collapseAtStart(): boolean {
+    const children = this.getChildren();
+    const parent = this.getParent();
+    if (parent) {
+      for (const child of children) {
+        this.insertBefore(child);
+      }
+    }
+    this.remove();
+    return true;
+  }
+
+  insertNewAfter(): ElementNode {
+    const lastChild = this.getLastChild();
+    if (lastChild?.getTextContent() === '') {
+      const p = $createParagraphNode();
+      this.insertAfter(p);
+      lastChild.remove();
+      return p;
+    }
+    const p = $createParagraphNode();
+    this.append(p);
+    return p;
+  }
+}
+
+export function $createCalloutNode(calloutType: CalloutType = 'NOTE'): CalloutNode {
+  return $applyNodeReplacement(new CalloutNode(calloutType));
+}
+
+export function $isCalloutNode(node: LexicalNode | null | undefined): node is CalloutNode {
+  return node instanceof CalloutNode;
+}

package/src/nodes/callout/CalloutTransformer.ts

@@ -0,0 +1,87 @@
+import {
+  $convertFromMarkdownString,
+  type MultilineElementTransformer,
+  TRANSFORMERS,
+} from '@lexical/markdown';
+import { $createParagraphNode } from 'lexical';
+
+import {
+  $createCalloutNode,
+  $isCalloutNode,
+  CALLOUT_TYPES,
+  CalloutNode,
+  type CalloutType,
+} from './CalloutNode';
+
+/**
+ * GitHub-flavored callout syntax:
+ *
+ * ```markdown
+ * > [!NOTE]
+ * > Content line 1 with **bold** and [links](url)
+ * > Content line 2
+ * ```
+ *
+ * Supports: NOTE, TIP, IMPORTANT, WARNING, CAUTION
+ */
+const CALLOUT_START_REGEX = /^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/;
+const BLOCKQUOTE_LINE_REGEX = /^>\s?(.*)$/;
+
+export const CALLOUT_TRANSFORMER: MultilineElementTransformer = {
+  type: 'multiline-element',
+  dependencies: [CalloutNode],
+
+  regExpStart: CALLOUT_START_REGEX,
+
+  regExpEnd: {
+    regExp: /^(?!>\s?)/, // Ends when a line doesn't start with >
+    optional: true,
+  },
+
+  export: (node, exportChildren) => {
+    if (!$isCalloutNode(node)) return null;
+
+    const calloutType = node.getCalloutType();
+    const childContent = exportChildren(node);
+    const lines = childContent.split('\n');
+    const quoted = lines.map((line) => `> ${line}`).join('\n');
+    return `> [!${calloutType}]\n${quoted}`;
+  },
+
+  replace: (parentNode, _children, startMatch, _endMatch, linesInBetween, isImport) => {
+    const calloutType = startMatch[1] as CalloutType;
+    if (!CALLOUT_TYPES.includes(calloutType)) return false;
+
+    // Strip blockquote prefixes to get plain markdown content
+    const contentLines = (linesInBetween ?? [])
+      .map((line) => {
+        const match = line.match(BLOCKQUOTE_LINE_REGEX);
+        return match ? (match[1] ?? '') : null;
+      })
+      .filter((line): line is string => line !== null);
+
+    const innerMarkdown = contentLines.join('\n').trim();
+
+    const calloutNode = $createCalloutNode(calloutType);
+
+    if (innerMarkdown) {
+      // Parse inner markdown directly into calloutNode to avoid corrupting
+      // the outer root state with a global root.clear()
+      $convertFromMarkdownString(innerMarkdown, TRANSFORMERS, calloutNode);
+    }
+
+    // Ensure at least one empty paragraph for editing
+    if (calloutNode.getChildrenSize() === 0) {
+      calloutNode.append($createParagraphNode());
+    }
+
+    // On import, parentNode is the RootNode (which can't be replaced — Lexical #53).
+    // On keyboard-shortcut, parentNode is a ParagraphNode we should replace.
+    if (isImport) {
+      parentNode.append(calloutNode);
+    } else {
+      parentNode.replace(calloutNode);
+    }
+    return true;
+  },
+};

package/src/nodes/callout/calloutPlugin.ts

@@ -0,0 +1,37 @@
+import { $findMatchingParent } from '@lexical/utils';
+import { $createParagraphNode, $getSelection, $isRangeSelection } from 'lexical';
+
+import type { ScriboPlugin } from '../../types';
+import { CalloutPlugin } from './CalloutComponent';
+import { $createCalloutNode, CalloutNode } from './CalloutNode';
+import { CALLOUT_TRANSFORMER } from './CalloutTransformer';
+
+export const calloutPlugin: ScriboPlugin = {
+  name: 'callout',
+  nodes: [CalloutNode],
+  transformers: [CALLOUT_TRANSFORMER],
+  editorPlugins: [CalloutPlugin],
+  toolbarButtons: [
+    {
+      key: 'callout',
+      label: 'Callout',
+      iconClass: 'alert',
+      onSelect: (editor) => {
+        editor.update(() => {
+          const selection = $getSelection();
+          if (!$isRangeSelection(selection)) return;
+
+          const anchor = selection.anchor.getNode();
+          const topLevel =
+            $findMatchingParent(anchor, (n) => n.getParent()?.getType() === 'root') ?? anchor;
+
+          const calloutNode = $createCalloutNode('NOTE');
+          const p = $createParagraphNode();
+          calloutNode.append(p);
+          topLevel.insertAfter(calloutNode);
+          p.selectEnd();
+        });
+      },
+    },
+  ],
+};

package/src/nodes/callout/index.ts

@@ -0,0 +1,5 @@
+export { CalloutPlugin } from './CalloutComponent';
+export type { CalloutType, SerializedCalloutNode } from './CalloutNode';
+export { $createCalloutNode, $isCalloutNode, CALLOUT_TYPES, CalloutNode } from './CalloutNode';
+export { CALLOUT_TRANSFORMER } from './CalloutTransformer';
+export { calloutPlugin } from './calloutPlugin';