@eventuras/scribo 0.8.2 → 0.10.7

package/src/MarkdownEditor.tsx

@@ -2,27 +2,26 @@ import {
   $convertFromMarkdownString,
   $convertToMarkdownString,
   TRANSFORMERS,
-} from "@lexical/markdown";
-import {
-  $getRoot,
-} from 'lexical';
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { EditorState } from "lexical";
-import React, { useState } from "react";
-
-import EditorNodes from "./nodes/EditorNodes";
-import ToolbarPlugin from "./plugins/ToolbarPlugin";
-import EditorTheme from "./themes/EditorTheme";
-import ContentEditable from "./ui/ContentEditable";
-import Placeholder from "./ui/Placeholder";
+} from '@lexical/markdown';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import LinkPlugin from "./plugins/LinkPlugin";
-import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
-import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { $createParagraphNode, $createTextNode, $getRoot, type EditorState } from 'lexical';
+import type React from 'react';
+import { useMemo, useState } from 'react';
 import { useSharedHistoryContext } from './context/SharedHistoryContext';
+import EditorNodes from './nodes/EditorNodes';
+import AutoLinkPlugin from './plugins/AutoLinkPlugin';
+import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
+import LinkPlugin from './plugins/LinkPlugin';
+import ToolbarPlugin from './plugins/ToolbarPlugin';
+import EditorTheme from './themes/EditorTheme';
+import type { ScriboPlugin } from './types';
+import ContentEditable from './ui/ContentEditable';
+import Placeholder from './ui/Placeholder';
 
 export type onChangeMisc = {
   plainText: string;
@@ -30,6 +29,7 @@ export type onChangeMisc = {
 export interface MarkdownEditorProps {
   initialMarkdown?: string;
   className?: string;
+  plugins?: ScriboPlugin[];
   onChange?: (markdown: string, misc: onChangeMisc) => void;
   onBlur?: () => void;
   placeholder?: string;
@@ -41,8 +41,9 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
   const { historyState } = useSharedHistoryContext();
   const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
 
-  const [floatingAnchorElem, setFloatingAnchorElem] =
-    useState<HTMLDivElement | undefined>(undefined);
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | undefined>(
+    undefined
+  );
 
   const onRef = (_floatingAnchorElem: HTMLDivElement) => {
     if (_floatingAnchorElem !== null) {
@@ -50,33 +51,76 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
     }
   };
 
+  // Collect nodes and transformers from plugins
+  const pluginNodes = useMemo(
+    () => (props.plugins ?? []).flatMap((p) => p.nodes ?? []),
+    [props.plugins]
+  );
+  const allTransformers = useMemo(
+    () => [...(props.plugins ?? []).flatMap((p) => p.transformers ?? []), ...TRANSFORMERS],
+    [props.plugins]
+  );
+  const toolbarButtons = useMemo(
+    () => (props.plugins ?? []).flatMap((p) => p.toolbarButtons ?? []),
+    [props.plugins]
+  );
+  const editorPlugins = useMemo(
+    () => (props.plugins ?? []).flatMap((p) => p.editorPlugins ?? []),
+    [props.plugins]
+  );
+
   const internalOnChange = (editorState: EditorState) => {
     editorState.read(() => {
-      const markdown = $convertToMarkdownString(TRANSFORMERS);
+      const markdown = $convertToMarkdownString(allTransformers);
       const plainText = $getRoot().getTextContent();
-      props.onChange && props.onChange(markdown, { plainText });
+      props.onChange?.(markdown, { plainText });
     });
   };
 
   const initialConfig = {
-    namespace: "ScriboMarkdown",
-    nodes: [...EditorNodes],
+    namespace: 'ScriboMarkdown',
+    nodes: [...EditorNodes, ...pluginNodes],
     onError: (error: Error) => {
       throw error;
     },
     theme: EditorTheme,
-    editorState: () => {
-      $convertFromMarkdownString(props.initialMarkdown ?? "", TRANSFORMERS);
-    },
+    editorState: props.initialMarkdown
+      ? () => {
+          // Unescape backslash-escaped markdown characters
+          const unescapedMarkdown = (props.initialMarkdown ?? '').replaceAll(
+            /\\([*_`[\]()#+-])/g,
+            '$1'
+          );
+          try {
+            $convertFromMarkdownString(unescapedMarkdown, allTransformers);
+          } catch (err) {
+            // Markdown parsing threw (e.g. a transformer bug). Fall back to plain
+            // text so the field stays editable and content isn't lost — better
+            // than crashing the whole tree and propagating to the page boundary.
+            console.error('Scribo: markdown parse failed, falling back to plain text', err);
+            const root = $getRoot();
+            root.clear();
+            const paragraph = $createParagraphNode();
+            paragraph.append($createTextNode(unescapedMarkdown));
+            root.append(paragraph);
+          }
+        }
+      : undefined,
   };
 
   return (
     <div className={props.className}>
       <LexicalComposer initialConfig={initialConfig}>
-        <div className="editor-shell" onBlur={props.onBlur} data-testid={props['data-testid']} id={props.id}>
-          <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
+        <div
+          className="editor-shell"
+          onBlur={props.onBlur}
+          data-testid={props['data-testid']}
+          id={props.id}
+        >
+          <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} toolbarButtons={toolbarButtons} />
           <div className="editor-container rich-text">
             <HistoryPlugin externalHistoryState={historyState} />
+            <MarkdownShortcutPlugin transformers={allTransformers} />
             <AutoLinkPlugin />
             <LinkPlugin />
             <FloatingLinkEditorPlugin
@@ -87,7 +131,11 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
             <RichTextPlugin
               contentEditable={
                 <div className="editor-scroller">
-                  <div className="editor" ref={onRef} id={props.id ? `${props.id}-editable` : undefined}>
+                  <div
+                    className="editor"
+                    ref={onRef}
+                    id={props.id ? `${props.id}-editable` : undefined}
+                  >
                     <ContentEditable />
                   </div>
                 </div>
@@ -97,6 +145,9 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
             />
           </div>
           {props.onChange && <OnChangePlugin onChange={internalOnChange} />}
+          {editorPlugins.map((Plugin) => (
+            <Plugin key={Plugin.displayName ?? Plugin.name} />
+          ))}
         </div>
       </LexicalComposer>
     </div>

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;
+}