@eightyfourthousand/lib-editing 2026.3.0

package/src/lib/components/editor/extensions/InternalLink/InternalLinkInput.tsx

@@ -0,0 +1,71 @@
+import { Button, Input } from '@eightyfourthousand/design-system';
+import { CheckIcon, Trash2Icon } from 'lucide-react';
+import { useRef } from 'react';
+
+export const InternalLinkInput = ({
+  type,
+  uuid,
+  onSubmit,
+}: {
+  type: string;
+  uuid: string;
+  onSubmit: (type?: string, entity?: string) => void;
+}) => {
+  const typeRef = useRef<HTMLInputElement>(null);
+  const uuidRef = useRef<HTMLInputElement>(null);
+
+  const submit = () => {
+    onSubmit(typeRef.current?.value, uuidRef.current?.value);
+  };
+
+  return (
+    <div className="flex justify-between gap-2 p-0 w-fit max-w-80">
+      <Input
+        ref={typeRef}
+        placeholder="Entity type..."
+        value={type}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            submit();
+          }
+        }}
+      />
+      <Input
+        ref={uuidRef}
+        placeholder="Entity uuid..."
+        value={uuid}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            submit();
+          }
+        }}
+      />
+      <Button
+        size="icon"
+        variant="ghost"
+        disabled={!!uuidRef.current && !!typeRef.current}
+        onClick={submit}
+      >
+        <CheckIcon />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        type="button"
+        onClick={() => {
+          if (uuidRef.current) {
+            uuidRef.current.value = '';
+          }
+          if (typeRef.current) {
+            typeRef.current.value = '';
+          }
+          onSubmit();
+        }}
+      >
+        <Trash2Icon className="text-destructive" />
+      </Button>
+    </div>
+  );
+};

package/src/lib/components/editor/extensions/InternalLink/index.ts

@@ -0,0 +1 @@
+export * from './InternalLink';

package/src/lib/components/editor/extensions/Italic.ts

@@ -0,0 +1,50 @@
+import { Italic as TiptapItalic } from '@tiptap/extension-italic';
+import { mergeAttributes } from '@tiptap/react';
+import { v4 as uuidv4 } from 'uuid';
+
+export const Italic = TiptapItalic.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      type: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-type'),
+        renderHTML(attributes) {
+          return mergeAttributes(attributes, { 'data-type': attributes.type });
+        },
+      },
+      lang: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-lang'),
+        renderHTML(attributes) {
+          return mergeAttributes(attributes, { 'data-lang': attributes.lang });
+        },
+      },
+      textStyle: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('data-text-style'),
+        renderHTML(attributes) {
+          return mergeAttributes(attributes, {
+            'data-text-style': attributes.textStyle,
+          });
+        },
+      },
+    };
+  },
+  addCommands() {
+    const name = this.name;
+    return {
+      ...this.parent?.(),
+      setItalic() {
+        return ({ commands }) => {
+          return commands.setMark(name, { uuid: uuidv4() });
+        };
+      },
+      toggleItalic() {
+        return ({ commands }) => {
+          return commands.toggleMark(name, { uuid: uuidv4() });
+        };
+      },
+    };
+  },
+});

package/src/lib/components/editor/extensions/LeadingSpace.ts

@@ -0,0 +1,106 @@
+import { Extension, mergeAttributes } from '@tiptap/core';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface LeadingSpaceOptions {
+  types: string[];
+  defaultHasLeadingSpace: boolean;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    leadingSpace: {
+      /**
+       * Add a leading space
+       */
+      setLeadingSpace: () => ReturnType;
+      /**
+       * Remove a leading space
+       */
+      unsetLeadingSpace: () => ReturnType;
+
+      /**
+       * Toggle a leading space
+       */
+      toggleLeadingSpace: () => ReturnType;
+    };
+  }
+}
+
+export const LeadingSpace = Extension.create<LeadingSpaceOptions>({
+  name: 'leadingSpace',
+  addOptions() {
+    return {
+      types: ['paragraph', 'heading', 'lineGroup'],
+      defaultHasLeadingSpace: false,
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          hasLeadingSpace: {
+            default: this.options.defaultHasLeadingSpace,
+            parseHTML: (element) => element.className.includes('mt-6'),
+            renderHTML: (attributes) => {
+              if (attributes.hasLeadingSpace) {
+                return mergeAttributes(attributes, { class: 'mt-6 no-indent' });
+              }
+              return {};
+            },
+          },
+          leadingSpaceUuid: {
+            default: undefined,
+            parseHTML: (element) =>
+              element.getAttribute('data-leading-space-uuid') || undefined,
+            renderHTML: (attributes) => {
+              if (!attributes.leadingSpaceUuid) {
+                return {};
+              }
+              return {
+                'data-leading-space-uuid': attributes.leadingSpaceUuid,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setLeadingSpace:
+        () =>
+        ({ commands }) => {
+          return this.options.types
+            .map((type) =>
+              commands.updateAttributes(type, {
+                hasLeadingSpace: true,
+                leadingSpaceUuid: uuidv4(),
+              }),
+            )
+            .every((response) => response);
+        },
+      unsetLeadingSpace:
+        () =>
+        ({ commands }) => {
+          return this.options.types
+            .map((type) =>
+              commands.resetAttributes(type, [
+                'hasLeadingSpace',
+                'leadingSpaceUuid',
+              ]),
+            )
+            .every((response) => response);
+        },
+      toggleLeadingSpace:
+        () =>
+        ({ editor, commands }) => {
+          if (editor.isActive({ hasLeadingSpace: true })) {
+            return commands.unsetLeadingSpace();
+          }
+          return commands.setLeadingSpace();
+        },
+    };
+  },
+});

package/src/lib/components/editor/extensions/Line/LineNode.ts

@@ -0,0 +1,41 @@
+import { Node } from '@tiptap/core';
+import { mergeAttributes } from '@tiptap/core';
+
+export const LineNode = Node.create({
+  name: 'line',
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: 'text*',
+
+  defining: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'li[type="line"]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'li',
+      mergeAttributes(
+        { type: 'line', class: '-indent-8 pl-8' },
+        HTMLAttributes,
+      ),
+      0,
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => this.editor.commands.splitListItem(this.name),
+    };
+  },
+});

package/src/lib/components/editor/extensions/LineGroup/LineGroupNode.ts

@@ -0,0 +1,124 @@
+import { Node } from '@tiptap/core';
+import { mergeAttributes, wrappingInputRule } from '@tiptap/react';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface LineGroupOptions {
+  iitemTypeName: string;
+  HTMLAttributes: Record<string, unknown>;
+  keepMarks: boolean;
+  keepAttributes: boolean;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    lineGroup: {
+      toggleLineGroup: () => ReturnType;
+    };
+  }
+}
+
+/**
+ * Matches a bullet list to a tilde.
+ */
+export const inputRegex = /^\s*([~])\s$/;
+
+export const LineGroupNode = Node.create({
+  name: 'lineGroup',
+
+  addOptions() {
+    return {
+      itemTypeName: 'line',
+      HTMLAttributes: {},
+      keepMarks: false,
+      keepAttributes: false,
+    };
+  },
+
+  group: 'block list',
+
+  content() {
+    return `${this.options.itemTypeName}+`;
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'ul[type="line-group"]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'ul',
+      mergeAttributes({ type: 'line-group', class: 'my-4' }, HTMLAttributes),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      toggleLineGroup:
+        () =>
+        ({ commands, chain }) => {
+          if (this.options.keepAttributes) {
+            return chain()
+              .toggleList(
+                this.name,
+                this.options.itemTypeName,
+                this.options.keepMarks,
+                {
+                  uuid: uuidv4(),
+                },
+              )
+              .updateAttributes('line', this.editor.getAttributes('textStyle'))
+              .run();
+          }
+          return commands.toggleList(
+            this.name,
+            this.options.itemTypeName,
+            this.options.keepMarks,
+            {
+              uuid: uuidv4(),
+            },
+          );
+        },
+    };
+  },
+
+  addAttributes() {
+    return {
+      type: {
+        default: 'line-group',
+        parseHTML: (element) => element.getAttribute('type'),
+      },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Shift-9': () => this.editor.commands.toggleLineGroup(),
+    };
+  },
+
+  addInputRules() {
+    let inputRule = wrappingInputRule({
+      find: inputRegex,
+      type: this.type,
+    });
+
+    if (this.options.keepMarks || this.options.keepAttributes) {
+      inputRule = wrappingInputRule({
+        find: inputRegex,
+        type: this.type,
+        keepMarks: this.options.keepMarks,
+        keepAttributes: this.options.keepAttributes,
+        getAttributes: () => {
+          return this.editor.getAttributes('textStyle');
+        },
+        editor: this.editor,
+      });
+    }
+    return [inputRule];
+  },
+});

package/src/lib/components/editor/extensions/Link/Link.ts

@@ -0,0 +1,65 @@
+import { Link as TipTapLink } from '@tiptap/extension-link';
+import { v4 as uuidv4 } from 'uuid';
+import { createMarkViewDom, registerEditorElement } from '../../util';
+
+export const Link = TipTapLink.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      uuid: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute('uuid'),
+      },
+    };
+  },
+  addCommands() {
+    const name = this.name;
+    return {
+      ...this.parent?.(),
+      setLink(attributes) {
+        return ({ commands }) => {
+          return commands.setMark(name, {
+            ...attributes,
+            uuid: uuidv4(),
+          });
+        };
+      },
+      toggleLink() {
+        return ({ commands }) => {
+          return commands.toggleMark(name, { uuid: uuidv4() });
+        };
+      },
+    };
+  },
+  addMarkView() {
+    return (props) => {
+      const isEditable = props.editor.isEditable;
+      const { dom } = createMarkViewDom({
+        ...props,
+        element: 'a',
+      });
+
+      dom.setAttribute('href', props.mark.attrs.href);
+      dom.setAttribute('target', '_blank');
+      dom.setAttribute('rel', 'noreferrer');
+
+      // Set uuid attribute for HoverCardProvider identification
+      if (props.mark.attrs.uuid) {
+        dom.setAttribute('uuid', props.mark.attrs.uuid);
+      }
+
+      // Only add type attribute in edit mode for hover card detection
+      if (isEditable) {
+        dom.setAttribute('type', 'link');
+        registerEditorElement(dom, props.editor);
+      }
+
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    };
+  },
+}).configure({
+  openOnClick: true,
+});

package/src/lib/components/editor/extensions/Link/LinkHoverContent.tsx

@@ -0,0 +1,124 @@
+import { Button } from '@eightyfourthousand/design-system';
+import { Editor } from '@tiptap/core';
+import { GlobeIcon, PencilIcon, Trash2Icon } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { HoverInputField } from '../HoverInputField';
+import { findMarkByUuid } from '../../util';
+import { useHoverCard } from '../../../shared/HoverCardProvider';
+
+const EDITOR_UPDATE_DELAY_MS = 100;
+
+export const LinkHoverContent = ({
+  uuid,
+  href,
+  editor,
+  anchor,
+}: {
+  uuid: string;
+  href: string;
+  editor: Editor;
+  anchor: HTMLElement;
+}) => {
+  const [isEditing, setIsEditingLocal] = useState(false);
+  const { close, setIsEditing: setIsEditingContext } = useHoverCard();
+
+  const setIsEditing = useCallback(
+    (editing: boolean) => {
+      setIsEditingLocal(editing);
+      setIsEditingContext(editing);
+    },
+    [setIsEditingContext],
+  );
+
+  const deleteLink = useCallback(() => {
+    setIsEditing(false);
+    close();
+
+    setTimeout(() => {
+      const range = findMarkByUuid({ editor, uuid, markType: 'link' });
+      if (!range) {
+        console.warn('Link mark not found in the document.');
+        return;
+      }
+
+      const { from, to, mark } = range;
+      const { tr } = editor.state;
+      tr.removeMark(from, to, mark.type);
+      editor.view.dispatch(tr);
+    }, EDITOR_UPDATE_DELAY_MS);
+  }, [editor, uuid, close, setIsEditing]);
+
+  const updateLink = useCallback(
+    (newHref: string) => {
+      setIsEditing(false);
+      close();
+
+      setTimeout(() => {
+        const range = findMarkByUuid({ editor, uuid, markType: 'link' });
+        if (!range) {
+          console.warn('Link mark not found in the document.');
+          return;
+        }
+
+        const { from, to, mark } = range;
+        const { tr } = editor.state;
+        tr.removeMark(from, to, mark.type);
+        tr.addMark(
+          from,
+          to,
+          mark.type.create({ ...mark.attrs, href: newHref }),
+        );
+        editor.view.dispatch(tr);
+
+        // Update the DOM attribute directly for immediate feedback
+        anchor.setAttribute('href', newHref);
+      }, EDITOR_UPDATE_DELAY_MS);
+    },
+    [editor, uuid, anchor, close, setIsEditing],
+  );
+
+  return (
+    <div className="flex justify-between gap-2 p-2 w-fit max-w-72">
+      {isEditing ? (
+        <HoverInputField
+          type="link"
+          attr="href"
+          valueRef={href}
+          placeholder="Add link..."
+          onSubmit={(value) => {
+            if (value) {
+              updateLink(value);
+            } else {
+              deleteLink();
+            }
+            setIsEditing(false);
+          }}
+        />
+      ) : (
+        <>
+          <GlobeIcon className="text-primary my-auto size-6 [&_svg]:size-4" />
+          <span className="truncate text-muted-foreground text-sm my-auto">
+            {href}
+          </span>
+          <span className="flex-grow" />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-6 [&_svg]:size-4"
+            onClick={() => setIsEditing(true)}
+          >
+            <PencilIcon className="text-primary my-auto" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-6 [&_svg]:size-4"
+            onClick={deleteLink}
+          >
+            <Trash2Icon className="text-destructive my-auto" />
+          </Button>
+        </>
+      )}
+    </div>
+  );
+};

package/src/lib/components/editor/extensions/Link/index.ts

@@ -0,0 +1 @@
+export * from './Link';

package/src/lib/components/editor/extensions/List.ts

@@ -0,0 +1,74 @@
+import { BulletList, ListItem as TipTapListItem } from '@tiptap/extension-list';
+import { mergeAttributes } from '@tiptap/react';
+
+const ITEM_STYLE_TO_CLASS: { [key: string]: string } = {
+  none: 'list-none',
+  dots: 'list-[disc]',
+  circles: 'list-[circle]',
+  numbers: 'list-decimal',
+  letters: 'list-[lower-latin]',
+};
+
+const LIST_SPACING_TO_CLASS: { [key: string]: string } = {
+  horizontal: 'ml-4',
+  vertical: 'mt-4',
+};
+
+export const ListItem = TipTapListItem.extend({
+  content: '(paragraph | heading) block*',
+});
+
+export const List = BulletList.extend({
+  addOptions() {
+    return {
+      itemTypeName: 'listItem',
+      keepMarks: false,
+      keepAttributes: false,
+      ...this.parent?.(),
+      HTMLAttributes: {},
+    };
+  },
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      spacing: {
+        default: 'horizontal',
+        parseHTML: (element) => element.getAttribute('data-spacing'),
+        renderHTML(attributes) {
+          return mergeAttributes(attributes, {
+            'data-spacing': attributes.spacing,
+            class:
+              LIST_SPACING_TO_CLASS[attributes.spacing || 'horizontal'] ||
+              'ml-4',
+          });
+        },
+      },
+      nesting: {
+        default: undefined,
+        parseHTML: (element) => {
+          const nesting = element.getAttribute('data-nesting');
+          return nesting ? parseInt(nesting, 10) : 0;
+        },
+        renderHTML(attributes) {
+          return mergeAttributes(attributes, {
+            'data-nesting': `${attributes.nesting}`,
+          });
+        },
+      },
+      itemStyle: {
+        default: 'none',
+        parseHTML: (element) => element.getAttribute('data-item-style'),
+        renderHTML(attributes) {
+          return mergeAttributes(attributes, {
+            'data-item-style': attributes.itemStyle,
+            class:
+              ITEM_STYLE_TO_CLASS[attributes.itemStyle || 'none'] ||
+              'list-none',
+          });
+        },
+      },
+    };
+  },
+});
+
+export default List;