react-native-enriched-html 0.0.0 → 1.0.1

package/src/web/EnrichedTextInput.tsx

@@ -0,0 +1,417 @@
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  type CSSProperties,
+} from 'react';
+import './EnrichedText.css';
+import type { Node } from '@tiptap/pm/model';
+import type {
+  EnrichedTextInputInstance,
+  EnrichedTextInputProps,
+} from '../types';
+import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
+import {
+  tiptapPosToNativePos,
+  nativePosToTiptapPos,
+  nativeLeafText,
+} from './positionMapping';
+import {
+  useEditor,
+  EditorContent,
+  type ChainedCommands,
+  Editor,
+} from '@tiptap/react';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import History from '@tiptap/extension-history';
+import { Placeholder } from '@tiptap/extensions/placeholder';
+import { useOnChangeHtml } from './useOnChangeHtml';
+import { useOnChangeText } from './useOnChangeText';
+import { useOnChangeState } from './useOnChangeState';
+import { useOnLinkDetected } from './useOnLinkDetected';
+import type { LinkEmitterState } from './emitLinkDetected';
+import {
+  prepareHtmlForTiptap,
+  normalizeHtmlFromTiptap,
+} from './normalization/tiptapHtmlNormalizer';
+import { ENRICHED_TEXT_INPUT_DEFAULT_PROPS } from '../utils/EnrichedTextInputDefaultProps';
+import { enrichedInputStyleToCSSProperties } from './styleConversion/enrichedInputStyleToCSSProperties';
+import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedThemingToCSSProperties';
+import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
+import {
+  htmlStyleToCSSVariables,
+  mergeWithDefaultHtmlStyle,
+} from './styleConversion/htmlStyleToCSSVariables';
+import { EnrichedBold } from './formats/EnrichedBold';
+import { EnrichedItalic } from './formats/EnrichedItalic';
+import { EnrichedStrike } from './formats/EnrichedStrike';
+import { EnrichedUnderline } from './formats/EnrichedUnderline';
+import { EnrichedCode } from './formats/EnrichedCode';
+import { EnrichedHeading } from './formats/EnrichedHeading';
+import { EnrichedBlockquote } from './formats/EnrichedBlockquote';
+import { EnrichedCodeBlock } from './formats/EnrichedCodeBlock';
+import { EnrichedImage } from './formats/EnrichedImage';
+import { EnrichedLink, setLink, removeLink } from './formats/EnrichedLink';
+import { EnrichedMention } from './formats/EnrichedMention';
+import { EnrichedListItem } from './formats/EnrichedListItem';
+import { EnrichedUnorderedList } from './formats/EnrichedUnorderedList';
+import { EnrichedOrderedList } from './formats/EnrichedOrderedList';
+import { EnrichedCheckboxItem } from './formats/EnrichedCheckboxItem';
+import { EnrichedCheckboxList } from './formats/EnrichedCheckboxList';
+import { EnrichedTextAlign } from './formats/EnrichedTextAlign';
+import { StripBoldInStyledHeadingsPlugin } from './pmPlugins/StripBoldInStyledHeadingsPlugin';
+import { StrictMarksPlugin } from './pmPlugins/StrictMarksPlugin';
+import { MergeAdjacentSameKindBlocksPlugin } from './pmPlugins/MergeAdjacentSameKindBlocksPlugin';
+import { StripMarksInCodeBlockPlugin } from './pmPlugins/StripMarksInCodeBlockPlugin';
+import { handleClipboardPasteImages } from './pasteImages';
+import {
+  MentionPlugin,
+  setMention,
+  startMention,
+  useMentionEvents,
+} from './pmPlugins/MentionPlugin';
+import { StripMarksOnImagePlugin } from './pmPlugins/StripMarksOnImagePlugin';
+import { ShortcutPlugin } from './pmPlugins/ShortcutPlugin';
+import { returnKeyTypeToEnterKeyHint } from './returnKeyTypeToEnterKeyHint';
+import { ENRICHED_TEXT_INPUT_CLASSNAME } from './constants/classNames';
+import { AutolinkPlugin } from './pmPlugins/AutolinkPlugin';
+import { useStableRef } from './useStableRef';
+
+function runFocused(
+  editor: Editor,
+  apply: (chain: ChainedCommands) => ChainedCommands
+) {
+  apply(editor.chain().focus()).run();
+}
+
+export const EnrichedTextInput = ({
+  ref,
+  defaultValue,
+  autoFocus,
+  editable = ENRICHED_TEXT_INPUT_DEFAULT_PROPS.editable,
+  placeholder = '',
+  placeholderTextColor,
+  cursorColor,
+  selectionColor,
+  autoCapitalize = ENRICHED_TEXT_INPUT_DEFAULT_PROPS.autoCapitalize,
+  scrollEnabled = ENRICHED_TEXT_INPUT_DEFAULT_PROPS.scrollEnabled,
+  mentionIndicators = ENRICHED_TEXT_INPUT_DEFAULT_PROPS.mentionIndicators.slice(),
+  onFocus,
+  style,
+  onBlur,
+  onChangeSelection,
+  onKeyPress,
+  onChangeText,
+  onChangeHtml,
+  onChangeState,
+  onLinkDetected,
+  onSubmitEditing,
+  returnKeyType,
+  submitBehavior,
+  onPasteImages,
+  onMentionDetected,
+  onStartMention,
+  onChangeMention,
+  onEndMention,
+  linkRegex,
+  htmlStyle,
+  useHtmlNormalizer,
+}: EnrichedTextInputProps) => {
+  const tiptapContent =
+    defaultValue != null
+      ? prepareHtmlForTiptap(defaultValue, useHtmlNormalizer)
+      : defaultValue;
+
+  const resolvedHtmlStyle = useMemo(
+    () => mergeWithDefaultHtmlStyle(htmlStyle),
+    [htmlStyle]
+  );
+  const mentionCallbacks = useMemo(
+    () => ({
+      onStartMention,
+      onChangeMention,
+      onEndMention,
+      onMentionDetected,
+    }),
+    [onStartMention, onChangeMention, onEndMention, onMentionDetected]
+  );
+
+  const htmlStyleRef = useStableRef(resolvedHtmlStyle);
+  const onPasteImagesRef = useStableRef(onPasteImages);
+  const mentionIndicatorsRef = useStableRef(mentionIndicators);
+  const submitBehaviorRef = useStableRef(submitBehavior);
+  const onSubmitEditingRef = useStableRef(onSubmitEditing);
+  const onKeyPressRef = useStableRef(onKeyPress);
+  const useHtmlNormalizerRef = useStableRef(useHtmlNormalizer);
+  const mentionCallbacksRef = useStableRef(mentionCallbacks);
+
+  const editorInstanceRef = useRef<Editor | null>(null);
+
+  const handleKeyDown = (doc: Node, event: KeyboardEvent): boolean => {
+    onKeyPressRef.current?.(adaptWebToNativeEvent(event, { key: event.key }));
+    if (event.key !== 'Enter') {
+      return false;
+    }
+
+    const sb = submitBehaviorRef.current;
+    if (sb === 'submit' || sb === 'blurAndSubmit') {
+      event.preventDefault();
+      const text = nativeLeafText(doc, 0, doc.content.size);
+      onSubmitEditingRef.current?.(adaptWebToNativeEvent(event, { text }));
+      if (sb === 'blurAndSubmit') {
+        editorInstanceRef.current?.commands.blur();
+      }
+      return true;
+    }
+
+    return false;
+  };
+
+  const linkEmitterRef = useRef<LinkEmitterState>({
+    linkRegex,
+    onLinkDetected,
+    lastEmitted: null,
+  });
+  useEffect(() => {
+    linkEmitterRef.current.linkRegex = linkRegex;
+    linkEmitterRef.current.onLinkDetected = onLinkDetected;
+  }, [linkRegex, onLinkDetected]);
+
+  const extensions = useMemo(
+    () => [
+      Document,
+      Paragraph,
+      Text,
+      History,
+      EnrichedBold,
+      EnrichedItalic,
+      EnrichedUnderline,
+      EnrichedStrike,
+      EnrichedCode,
+      EnrichedLink.configure({
+        getLinkRegex: () => linkEmitterRef.current.linkRegex,
+      }),
+      EnrichedImage,
+      EnrichedMention,
+      EnrichedHeading,
+      EnrichedBlockquote,
+      EnrichedCodeBlock,
+      EnrichedListItem,
+      EnrichedCheckboxItem,
+      EnrichedUnorderedList,
+      EnrichedOrderedList,
+      EnrichedCheckboxList,
+      EnrichedTextAlign,
+      StripMarksInCodeBlockPlugin,
+      StripMarksOnImagePlugin,
+      StripBoldInStyledHeadingsPlugin.configure({
+        getHtmlStyle: () => htmlStyleRef.current,
+      }),
+      MergeAdjacentSameKindBlocksPlugin,
+      StrictMarksPlugin,
+      MentionPlugin.configure({
+        getIndicators: () => mentionIndicatorsRef.current,
+      }),
+      ShortcutPlugin.configure({
+        getHtmlStyle: () => htmlStyleRef.current,
+      }),
+      AutolinkPlugin.configure({
+        getLinkEmitter: () => linkEmitterRef.current,
+      }),
+      Placeholder.configure({
+        placeholder,
+        showOnlyWhenEditable: true,
+      }),
+    ],
+    [placeholder, htmlStyleRef, mentionIndicatorsRef]
+  );
+
+  const editor = useEditor(
+    {
+      extensions,
+      editable,
+      autofocus: autoFocus,
+      onCreate: ({ editor: _editor }) => {
+        // Setting initial content in this way ensures all custom plugins are run and applied
+        _editor.commands.setContent(tiptapContent ?? '');
+      },
+      onFocus: ({ event }) => {
+        onFocus?.(adaptWebToNativeEvent(event, { target: -1 }));
+      },
+      onBlur: ({ event }) => {
+        onBlur?.(adaptWebToNativeEvent(event, { target: -1 }));
+      },
+      onSelectionUpdate: ({ editor: _editor }) => {
+        const { state } = _editor;
+        const { from, to } = state.selection;
+
+        const start = tiptapPosToNativePos(state.doc, from);
+        const end = tiptapPosToNativePos(state.doc, to);
+        const text = nativeLeafText(state.doc, from, to);
+        onChangeSelection?.(adaptWebToNativeEvent(null, { start, end, text }));
+      },
+      editorProps: {
+        handleKeyDown: (view, event) => handleKeyDown(view.state.doc, event),
+        handlePaste: (_view, event) =>
+          handleClipboardPasteImages(
+            event,
+            () => editorInstanceRef.current,
+            () => onPasteImagesRef.current
+          ),
+        attributes: {
+          autoCapitalize,
+          enterkeyhint: returnKeyTypeToEnterKeyHint(returnKeyType),
+        },
+        transformPastedHTML: (html) => {
+          return prepareHtmlForTiptap(html, useHtmlNormalizerRef.current);
+        },
+      },
+    },
+    [tiptapContent, extensions]
+  );
+
+  useEffect(() => {
+    editorInstanceRef.current = editor ?? null;
+  }, [editor]);
+
+  useEffect(() => {
+    if (!editor) return;
+    let dom: HTMLElement;
+    try {
+      dom = editor.view.dom;
+    } catch {
+      return;
+    }
+    dom.setAttribute(
+      'enterkeyhint',
+      returnKeyTypeToEnterKeyHint(returnKeyType)
+    );
+  }, [editor, returnKeyType]);
+
+  useEffect(() => {
+    editor?.commands.normalizeBoldInStyledHeadings();
+  }, [editor, resolvedHtmlStyle]);
+
+  const getMentionCallbacks = useCallback(
+    () => mentionCallbacksRef.current,
+    [mentionCallbacksRef]
+  );
+
+  useMentionEvents(editor, getMentionCallbacks);
+  useOnChangeHtml(editor, onChangeHtml);
+  useOnChangeText(editor, onChangeText);
+  useOnChangeState(editor, resolvedHtmlStyle, onChangeState);
+  useOnLinkDetected(editor, linkEmitterRef);
+
+  useImperativeHandle(
+    ref,
+    (): EnrichedTextInputInstance => ({
+      focus: () => editor.commands.focus(),
+      blur: () => editor.commands.blur(),
+      setValue: (value: string) =>
+        editor.commands.setContent(
+          prepareHtmlForTiptap(value, useHtmlNormalizerRef.current)
+        ),
+      setSelection: (start, end) => {
+        const doc = editor.state.doc;
+        runFocused(editor, (c) =>
+          c.setTextSelection({
+            from: nativePosToTiptapPos(doc, start),
+            to: nativePosToTiptapPos(doc, end),
+          })
+        );
+      },
+      getHTML: () => Promise.resolve(normalizeHtmlFromTiptap(editor.getHTML())),
+      toggleBold: () => runFocused(editor, (c) => c.toggleBold()),
+      toggleItalic: () => runFocused(editor, (c) => c.toggleItalic()),
+      toggleUnderline: () => runFocused(editor, (c) => c.toggleUnderline()),
+      toggleStrikeThrough: () => runFocused(editor, (c) => c.toggleStrike()),
+      toggleInlineCode: () => runFocused(editor, (c) => c.toggleCode()),
+      toggleH1: () => runFocused(editor, (c) => c.toggleHeading({ level: 1 })),
+      toggleH2: () => runFocused(editor, (c) => c.toggleHeading({ level: 2 })),
+      toggleH3: () => runFocused(editor, (c) => c.toggleHeading({ level: 3 })),
+      toggleH4: () => runFocused(editor, (c) => c.toggleHeading({ level: 4 })),
+      toggleH5: () => runFocused(editor, (c) => c.toggleHeading({ level: 5 })),
+      toggleH6: () => runFocused(editor, (c) => c.toggleHeading({ level: 6 })),
+      toggleCodeBlock: () => runFocused(editor, (c) => c.toggleCodeBlock()),
+      toggleBlockQuote: () => runFocused(editor, (c) => c.toggleBlockquote()),
+      toggleOrderedList: () => runFocused(editor, (c) => c.toggleOrderedList()),
+      toggleUnorderedList: () =>
+        runFocused(editor, (c) => c.toggleUnorderedList()),
+      toggleCheckboxList: (checked: boolean) =>
+        runFocused(editor, (c) => c.toggleCheckboxList(checked)),
+      setLink: (start: number, end: number, text: string, url: string) =>
+        setLink(editor, start, end, text, url),
+      removeLink: (start: number, end: number) =>
+        removeLink(editor, start, end),
+      startMention: (indicator: string) => {
+        startMention(editor, indicator, mentionIndicatorsRef.current);
+      },
+      setMention: (
+        indicator: string,
+        text: string,
+        attributes?: Record<string, string>
+      ) => setMention(editor, indicator, text, attributes),
+      setImage: (src: string, width: number, height: number) =>
+        runFocused(editor, (c) => c.setImage({ src, width, height })),
+      measure: () => {},
+      measureInWindow: () => {},
+      measureLayout: () => {},
+      setNativeProps: () => {},
+      setTextAlignment: (alignment) => {
+        if (alignment === 'auto') {
+          runFocused(editor, (c) => c.unsetTextAlign());
+        } else {
+          runFocused(editor, (c) => c.setTextAlign(alignment));
+        }
+      },
+    }),
+    [editor, mentionIndicatorsRef, useHtmlNormalizerRef]
+  );
+
+  const editorStyle: CSSProperties = useMemo(
+    () => enrichedInputStyleToCSSProperties(style ?? {}, { scrollEnabled }),
+    [scrollEnabled, style]
+  );
+
+  const cssVars = useMemo(
+    () => htmlStyleToCSSVariables(resolvedHtmlStyle),
+    [resolvedHtmlStyle]
+  );
+
+  const themingStyle = useMemo(
+    (): CSSProperties =>
+      enrichedInputThemingToCSSProperties({
+        cursorColor,
+        placeholderTextColor,
+        selectionColor,
+      }),
+    [cursorColor, placeholderTextColor, selectionColor]
+  );
+
+  const mentionRulesCSS = useMemo(
+    () => buildMentionRulesCSS(resolvedHtmlStyle),
+    [resolvedHtmlStyle]
+  );
+
+  const finalStyle = useMemo(
+    () => ({ ...editorStyle, ...cssVars, ...themingStyle }),
+    [editorStyle, cssVars, themingStyle]
+  );
+
+  return (
+    <>
+      {mentionRulesCSS ? <style>{mentionRulesCSS}</style> : null}
+      <EditorContent
+        editor={editor}
+        className={ENRICHED_TEXT_INPUT_CLASSNAME}
+        style={finalStyle}
+        data-placeholder={placeholder}
+      />
+    </>
+  );
+};

package/src/web/adaptWebToNativeEvent.ts

@@ -0,0 +1,37 @@
+import type { NativeMethods, NativeSyntheticEvent } from 'react-native';
+
+// When TipTap events are based on DOM events (e.g., FocusEvent), we adapt them
+// to NativeSyntheticEvent where possible.  However, not all TipTap events
+// originate from the DOM, so we also support creating NativeSyntheticEvent
+// instances from scratch with sensible default values.
+export function adaptWebToNativeEvent<T>(
+  webEvent: React.SyntheticEvent | Event | null,
+  nativeEventPayload: T
+): NativeSyntheticEvent<T> {
+  let isPropagationStopped = false;
+  let isDefaultPrevented = webEvent ? webEvent.defaultPrevented : false;
+
+  return {
+    nativeEvent: nativeEventPayload,
+    bubbles: webEvent?.bubbles ?? false,
+    cancelable: webEvent?.cancelable ?? false,
+    currentTarget: (webEvent?.currentTarget ?? {}) as unknown as NativeMethods,
+    defaultPrevented: isDefaultPrevented,
+    eventPhase: webEvent?.eventPhase ?? 0,
+    isTrusted: webEvent?.isTrusted ?? true,
+    target: (webEvent?.target ?? {}) as unknown as NativeMethods,
+    timeStamp: webEvent?.timeStamp ?? Date.now(),
+    type: webEvent?.type ?? 'customEvent',
+    preventDefault: () => {
+      isDefaultPrevented = true;
+      webEvent?.preventDefault();
+    },
+    isDefaultPrevented: () => isDefaultPrevented,
+    stopPropagation: () => {
+      isPropagationStopped = true;
+      webEvent?.stopPropagation();
+    },
+    isPropagationStopped: () => isPropagationStopped,
+    persist: () => {},
+  };
+}

package/src/web/constants/brokenImageGlyph.ts

@@ -0,0 +1,7 @@
+// SVG path of the broken-image glyph, shared between the editor's
+// image node view (rendered as an inline <svg>).
+export const BROKEN_IMAGE_PATH_D =
+  'M200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM240,503L400,343L560,503L720,343L760,383L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,463L240,503ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,496L720,456L560,616L400,456L240,616L200,576L200,760Q200,760 200,760Q200,760 200,760ZM200,760L200,760Q200,760 200,760Q200,760 200,760L200,496L200,576L200,463L200,383L200,200Q200,200 200,200Q200,200 200,200L200,200Q200,200 200,200Q200,200 200,200L200,463L200,463L200,576L200,576L200,760Q200,760 200,760Q200,760 200,760Z';
+
+// Glyph as a `mask`-ready data URI, used in EnrichedText.css.
+export const BROKEN_IMAGE_GLYPH_MASK = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'%3E%3Cpath d='${BROKEN_IMAGE_PATH_D}'/%3E%3C/svg%3E")`;

package/src/web/constants/classNames.ts

@@ -0,0 +1,2 @@
+export const ENRICHED_TEXT_INPUT_CLASSNAME = 'eti-editor';
+export const ENRICHED_TEXT_CLASSNAME = 'et-view';

package/src/web/emitLinkDetected.ts

@@ -0,0 +1,29 @@
+import type { RefObject } from 'react';
+import type { OnLinkDetected } from '../types';
+
+export interface LinkEmitterState {
+  linkRegex?: RegExp | null;
+  onLinkDetected?: (e: OnLinkDetected) => void;
+  lastEmitted: OnLinkDetected | null;
+}
+
+export type LinkEmitterRef = RefObject<LinkEmitterState>;
+
+function isSamePayload(a: OnLinkDetected, b: OnLinkDetected): boolean {
+  return (
+    a.text === b.text &&
+    a.url === b.url &&
+    a.start === b.start &&
+    a.end === b.end
+  );
+}
+
+export function emitLinkDetected(
+  state: LinkEmitterState,
+  next: OnLinkDetected
+): void {
+  const prev = state.lastEmitted;
+  if (prev && isSamePayload(prev, next)) return;
+  state.lastEmitted = next;
+  state.onLinkDetected?.(next);
+}

package/src/web/formats/EnrichedBlockquote.ts

@@ -0,0 +1,37 @@
+import Blockquote from '@tiptap/extension-blockquote';
+import { toggleParagraphFormat } from './formatRules';
+import {
+  wrappedBlockBackspace,
+  wrappedBlockEnter,
+} from './wrappedBlockKeyboard';
+
+export const EnrichedBlockquote = Blockquote.extend({
+  content: '(paragraph)+',
+
+  addInputRules() {
+    return [];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => wrappedBlockEnter(editor, 'blockquote'),
+      Backspace: ({ editor }) => wrappedBlockBackspace(editor, 'blockquote'),
+    };
+  },
+
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      toggleBlockquote:
+        () =>
+        ({ editor, commands, chain }) =>
+          toggleParagraphFormat(
+            () => editor.isActive('blockquote'),
+            () => commands.lift('blockquote'),
+            (c) => c.toggleWrap('blockquote'),
+            chain,
+            editor
+          ),
+    };
+  },
+});

package/src/web/formats/EnrichedBold.ts

@@ -0,0 +1,16 @@
+import Bold from '@tiptap/extension-bold';
+
+export const EnrichedBold = Bold.extend({
+  addInputRules() {
+    return [];
+  },
+  addKeyboardShortcuts() {
+    return {};
+  },
+  parseHTML() {
+    return [{ tag: 'b' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['b', HTMLAttributes, 0];
+  },
+});

package/src/web/formats/EnrichedCheckboxItem.ts

@@ -0,0 +1,35 @@
+import { TaskItem } from '@tiptap/extension-list';
+
+import { listBackspace, listEnter } from './listKeyboard';
+
+const CHECKBOX_LIST_WRAPPERS = [
+  'checkboxList',
+  'unorderedList',
+  'orderedList',
+] as const;
+
+export const EnrichedCheckboxItem = TaskItem.extend({
+  name: 'checkboxItem',
+
+  addOptions() {
+    return {
+      nested: false,
+      HTMLAttributes: {},
+      taskListTypeName: 'checkboxList',
+    };
+  },
+
+  content: 'paragraph',
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => listEnter(editor, 'checkboxItem'),
+      Backspace: ({ editor }) => {
+        if (editor.isActive('listItem')) {
+          return false;
+        }
+        return listBackspace(editor, 'checkboxItem', CHECKBOX_LIST_WRAPPERS);
+      },
+    };
+  },
+});

package/src/web/formats/EnrichedCheckboxList.ts

@@ -0,0 +1,50 @@
+import { type CommandProps } from '@tiptap/core';
+import { TaskList } from '@tiptap/extension-list';
+
+import { applyWrappingListToSelection } from './applyWrappingListToSelection';
+import { withPreservedAlignment } from './formatRules';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    checkboxList: {
+      toggleCheckboxList: (checked: boolean) => ReturnType;
+    };
+  }
+}
+
+export const EnrichedCheckboxList = TaskList.extend({
+  name: 'checkboxList',
+
+  addOptions() {
+    return {
+      itemTypeName: 'checkboxItem',
+      HTMLAttributes: {},
+    };
+  },
+
+  addCommands() {
+    return {
+      toggleCheckboxList: (checked: boolean) => {
+        return ({ editor, chain }: CommandProps): boolean => {
+          if (editor.isActive('checkboxList')) {
+            return withPreservedAlignment(editor, chain(), (c) =>
+              c.clearNodes().setParagraph()
+            );
+          }
+
+          return applyWrappingListToSelection(
+            editor,
+            chain,
+            'checkboxList',
+            'checkboxItem',
+            { checked }
+          );
+        };
+      },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {};
+  },
+});

package/src/web/formats/EnrichedCode.ts

@@ -0,0 +1,13 @@
+import Code from '@tiptap/extension-code';
+
+export const EnrichedCode = Code.extend({
+  // Allow code to combine with other marks (bold, italic, underline, strike).
+  excludes: 'link',
+  priority: 1000,
+  addInputRules() {
+    return [];
+  },
+  addKeyboardShortcuts() {
+    return {};
+  },
+});