@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.2

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

@@ -1,71 +0,0 @@
-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/Italic.ts

@@ -1,50 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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/List.ts

@@ -1,74 +0,0 @@
-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;