@multiplatform.one/rich-text 6.0.0

package/src/editor/editorStyles.ts

@@ -0,0 +1,260 @@
+/**
+ * CSS styles for the ProseMirror editor content area.
+ *
+ * ProseMirror renders its own DOM outside Tamagui, so CSS injection via
+ * a <style> tag is necessary. Colors use Tamagui CSS custom properties
+ * for theme awareness.
+ */
+
+export interface EditorCSSOptions {
+  /** Minimum height of the editor in pixels */
+  minHeight?: number;
+  /** Maximum height of the editor in pixels (enables scroll) */
+  maxHeight?: number;
+  /** CSS font-family string for body text */
+  bodyFontFamily?: string;
+  /** CSS font-family string for headings */
+  headingFontFamily?: string;
+}
+
+export function getEditorCSS(options: EditorCSSOptions = {}): string {
+  const { minHeight = 150, maxHeight, bodyFontFamily, headingFontFamily } = options;
+  const bodyFont = bodyFontFamily || "inherit";
+  const headingFont = headingFontFamily || bodyFont;
+
+  return `
+    .ProseMirror {
+      padding: 12px 12px 12px 16px;
+      min-height: ${minHeight}px;
+      ${maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : ""}
+      outline: none;
+      font-family: ${bodyFont};
+      color: var(--color12);
+    }
+    .ProseMirror:focus {
+      outline: none;
+    }
+    .ProseMirror p {
+      margin: 0 0 0.5em 0;
+    }
+    .ProseMirror p:last-child {
+      margin-bottom: 0;
+    }
+    .ProseMirror h1,
+    .ProseMirror h2,
+    .ProseMirror h3,
+    .ProseMirror h4,
+    .ProseMirror h5,
+    .ProseMirror h6 {
+      font-family: ${headingFont};
+    }
+    .ProseMirror h1 {
+      font-size: 2em;
+      font-weight: 700;
+      margin: 0.5em 0;
+    }
+    .ProseMirror h2 {
+      font-size: 1.5em;
+      font-weight: 600;
+      margin: 0.5em 0;
+    }
+    .ProseMirror h3 {
+      font-size: 1.17em;
+      font-weight: 600;
+      margin: 0.5em 0;
+    }
+    .ProseMirror h4 {
+      font-size: 1em;
+      font-weight: 600;
+      margin: 0.5em 0;
+    }
+    .ProseMirror h5 {
+      font-size: 0.875em;
+      font-weight: 600;
+      margin: 0.5em 0;
+    }
+    .ProseMirror h6 {
+      font-size: 0.75em;
+      font-weight: 600;
+      margin: 0.5em 0;
+    }
+    .ProseMirror ul,
+    .ProseMirror ol {
+      padding-left: 1em;
+      margin: 0.5em 0;
+    }
+    .ProseMirror ul {
+      list-style-type: disc;
+    }
+    .ProseMirror ol {
+      list-style-type: decimal;
+    }
+    .ProseMirror li {
+      display: list-item;
+      line-height: 1.6;
+    }
+    .ProseMirror li p {
+      margin: 0;
+    }
+    .ProseMirror ul ul {
+      list-style-type: circle;
+    }
+    .ProseMirror ul ul ul {
+      list-style-type: square;
+    }
+    .ProseMirror ul[data-type="taskList"] {
+      list-style: none;
+      padding-left: 0;
+      margin-left: 0;
+    }
+    .ProseMirror ul[data-type="taskList"] li {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5em;
+    }
+    .ProseMirror ul[data-type="taskList"] li > label {
+      flex: 0 0 auto;
+      margin-top: 0.2em;
+    }
+    .ProseMirror ul[data-type="taskList"] li > div {
+      flex: 1 1 auto;
+    }
+    .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
+      cursor: pointer;
+      width: 1em;
+      height: 1em;
+    }
+    .ProseMirror img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+    .ProseMirror img.ProseMirror-selectednode {
+      outline: 2px solid var(--blue10, #0066cc);
+    }
+    .ProseMirror blockquote {
+      border-left: 3px solid var(--color6, #ccc);
+      padding-left: 1em;
+      margin: 0.5em 0;
+      color: var(--color10, #666);
+    }
+    .ProseMirror code {
+      background-color: var(--color4, rgba(0,0,0,0.05));
+      padding: 0.15em 0.35em;
+      border-radius: 4px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.875em;
+      word-break: break-word;
+    }
+    .ProseMirror pre {
+      background-color: var(--color3, rgba(0,0,0,0.04));
+      border: 1px solid var(--color5, rgba(0,0,0,0.08));
+      padding: 0.75em 1em;
+      border-radius: 4px;
+      overflow-x: auto;
+      margin: 0.5em 0;
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .ProseMirror pre code {
+      background: none;
+      border: none;
+      padding: 0;
+      border-radius: 0;
+      font-size: 0.875em;
+      color: inherit;
+      word-break: normal;
+      white-space: pre;
+    }
+    .ProseMirror a {
+      color: var(--blue10, #0066cc);
+      text-decoration: underline;
+    }
+    .ProseMirror hr {
+      border: none;
+      border-top: 2px solid var(--color6, #ccc);
+      margin: 1em 0;
+    }
+    .ProseMirror p.is-editor-empty:first-child::before {
+      content: attr(data-placeholder);
+      color: var(--color8, #aaa);
+      pointer-events: none;
+      float: left;
+      height: 0;
+    }
+
+    /* Block drag handle */
+    .block-drag-handle:hover {
+      background-color: var(--color4, rgba(0,0,0,0.05));
+      opacity: 1 !important;
+    }
+    .block-drag-handle:active {
+      cursor: grabbing;
+    }
+
+    /* Tables */
+    .ProseMirror table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 0.5em 0;
+      overflow: hidden;
+    }
+    .ProseMirror td,
+    .ProseMirror th {
+      border: 1px solid var(--color6, #ddd);
+      padding: 0.4em 0.6em;
+      vertical-align: top;
+      position: relative;
+      min-width: 80px;
+    }
+    .ProseMirror th {
+      background-color: var(--color3, #f5f5f5);
+      font-weight: 600;
+    }
+    .ProseMirror .selectedCell {
+      background-color: var(--blue3, rgba(0, 102, 204, 0.08));
+    }
+    .ProseMirror .column-resize-handle {
+      position: absolute;
+      right: -2px;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: var(--blue10, #0066cc);
+      pointer-events: none;
+    }
+    .ProseMirror.resize-cursor {
+      cursor: col-resize;
+    }
+
+    /* Syntax highlighting (lowlight / highlight.js compatible) */
+    .ProseMirror pre .hljs-comment,
+    .ProseMirror pre .hljs-quote { color: var(--color9, #6a737d); font-style: italic; }
+    .ProseMirror pre .hljs-keyword,
+    .ProseMirror pre .hljs-selector-tag,
+    .ProseMirror pre .hljs-meta { color: var(--purple10, #d73a49); }
+    .ProseMirror pre .hljs-string,
+    .ProseMirror pre .hljs-attr,
+    .ProseMirror pre .hljs-template-tag,
+    .ProseMirror pre .hljs-template-variable { color: var(--green10, #22863a); }
+    .ProseMirror pre .hljs-number,
+    .ProseMirror pre .hljs-literal,
+    .ProseMirror pre .hljs-type,
+    .ProseMirror pre .hljs-params { color: var(--blue10, #005cc5); }
+    .ProseMirror pre .hljs-built_in,
+    .ProseMirror pre .hljs-builtin-name { color: var(--orange10, #e36209); }
+    .ProseMirror pre .hljs-title,
+    .ProseMirror pre .hljs-section { color: var(--blue10, #005cc5); font-weight: 600; }
+    .ProseMirror pre .hljs-name,
+    .ProseMirror pre .hljs-tag { color: var(--green10, #22863a); }
+    .ProseMirror pre .hljs-attribute { color: var(--purple10, #6f42c1); }
+    .ProseMirror pre .hljs-variable,
+    .ProseMirror pre .hljs-symbol,
+    .ProseMirror pre .hljs-bullet { color: var(--orange10, #e36209); }
+    .ProseMirror pre .hljs-addition { color: var(--green10, #22863a); background-color: rgba(34,134,58,0.1); }
+    .ProseMirror pre .hljs-deletion { color: var(--red10, #b31d28); background-color: rgba(179,29,40,0.1); }
+    .ProseMirror pre .hljs-emphasis { font-style: italic; }
+    .ProseMirror pre .hljs-strong { font-weight: bold; }
+  `;
+}

package/src/editor/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Editor internal exports
+ *
+ * These are implementation details used by the compound component.
+ * Public API is exported from src/index.ts.
+ */
+export { TiptapEditor } from "./TiptapEditor";
+export type { TiptapEditorProps } from "./TiptapEditor";
+export { getEditorCSS } from "./editorStyles";
+export { getEditorStateFromTiptap, getEditorStateFromBridge } from "./useEditorState";

package/src/editor/tentapEditor.spec.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect } from "vitest";
+import { NATIVE_SUPPORTED_COMMANDS } from "../constants";
+import { getEditorStateFromBridge } from "./useEditorState";
+
+// ===========================================================================
+// Test bridge extensions configuration
+// ===========================================================================
+
+describe("TentapEditor bridge extensions", () => {
+  it("includes ColorBridge, HighlightBridge, ImageBridge, and TaskListBridge", () => {
+    // We validate the bridge state mapping reads the fields these bridges
+    // provide. Since this is a .native.tsx file we cannot directly import
+    // in a web test environment, so we verify the state mapping and
+    // supported commands map which are the integration points.
+
+    const bridgeState = {
+      isBoldActive: false,
+      isItalicActive: false,
+      isUnderlineActive: false,
+      isStrikeActive: false,
+      isCodeActive: false,
+      headingLevel: 0,
+      isBulletListActive: false,
+      isOrderedListActive: false,
+      isTaskListActive: true,
+      isBlockquoteActive: false,
+      isLinkActive: false,
+      canUndo: false,
+      canRedo: false,
+      activeColor: "#e53935",
+      activeHighlight: "#fff59d",
+    };
+
+    const state = getEditorStateFromBridge(bridgeState);
+
+    // ColorBridge fields
+    expect(state.textColor).toBe("#e53935");
+    // HighlightBridge fields
+    expect(state.highlightColor).toBe("#fff59d");
+    // TaskListBridge fields
+    expect(state.isTaskList).toBe(true);
+  });
+});
+
+// ===========================================================================
+// Test executeCommand bridge method mapping
+// ===========================================================================
+
+describe("TentapEditor executeCommand mapping", () => {
+  it("textColor, highlight, image, and taskList are not no-ops", () => {
+    // Validate through the NATIVE_SUPPORTED_COMMANDS map that these commands
+    // are marked as supported (meaning they have real bridge implementations)
+    expect(NATIVE_SUPPORTED_COMMANDS.textColor).toBe(true);
+    expect(NATIVE_SUPPORTED_COMMANDS.highlight).toBe(true);
+    expect(NATIVE_SUPPORTED_COMMANDS.image).toBe(true);
+    expect(NATIVE_SUPPORTED_COMMANDS.taskList).toBe(true);
+  });
+
+  it("genuinely unsupported features are marked as unsupported", () => {
+    expect(NATIVE_SUPPORTED_COMMANDS.subscript).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.superscript).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.codeBlock).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.horizontalRule).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.clearFormatting).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.alignLeft).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.alignCenter).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.alignRight).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.alignJustify).toBe(false);
+  });
+});
+
+// ===========================================================================
+// Test mapBridgeStateToEditorState (getEditorStateFromBridge)
+// ===========================================================================
+
+describe("getEditorStateFromBridge for TentapEditor", () => {
+  it("reads activeColor, activeHighlight, and isTaskListActive from bridge state", () => {
+    const bridgeState = {
+      isBoldActive: true,
+      isItalicActive: false,
+      isUnderlineActive: true,
+      isStrikeActive: false,
+      isCodeActive: false,
+      headingLevel: 2,
+      isBulletListActive: false,
+      isOrderedListActive: false,
+      isTaskListActive: true,
+      isBlockquoteActive: false,
+      isLinkActive: true,
+      canUndo: true,
+      canRedo: false,
+      activeColor: "#1e88e5",
+      activeHighlight: "#c8e6c9",
+    };
+
+    const state = getEditorStateFromBridge(bridgeState);
+
+    // Values should come from the bridge, not hardcoded
+    expect(state.textColor).toBe("#1e88e5");
+    expect(state.highlightColor).toBe("#c8e6c9");
+    expect(state.isTaskList).toBe(true);
+
+    // Other state should map correctly
+    expect(state.isBold).toBe(true);
+    expect(state.isUnderline).toBe(true);
+    expect(state.isHeading2).toBe(true);
+    expect(state.isParagraph).toBe(false);
+    expect(state.isLink).toBe(true);
+    expect(state.canUndo).toBe(true);
+  });
+
+  it("returns null for color fields when bridge does not provide them", () => {
+    const bridgeState = {
+      isBoldActive: false,
+      headingLevel: 0,
+    };
+
+    const state = getEditorStateFromBridge(bridgeState);
+
+    // When bridge doesn't provide color fields, should be null
+    expect(state.textColor).toBeNull();
+    expect(state.highlightColor).toBeNull();
+    expect(state.isTaskList).toBe(false);
+  });
+});

package/src/editor/tiptapEditor.spec.tsx

@@ -0,0 +1,169 @@
+import { describe, it, expect, vi } from "vitest";
+
+vi.mock("@multiplatform.one/forms", () => ({
+  Button: (props: any) => (
+    <button
+      role="button"
+      aria-label={props["aria-label"]}
+      disabled={props.disabled}
+      onClick={props.onPress}
+    >
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", () => ({
+  Tooltip: ({ children }: any) => children,
+}));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: ({ children }: any) => <div data-testid="bubble-menu">{children}</div>,
+}));
+
+// Mock useEditor and EditorContent from @tiptap/react
+const mockEditor = {
+  isActive: vi.fn().mockReturnValue(false),
+  getAttributes: vi.fn().mockReturnValue({}),
+  can: vi.fn().mockReturnValue({ undo: () => false, redo: () => false }),
+  getHTML: vi.fn().mockReturnValue("<p></p>"),
+  getJSON: vi.fn().mockReturnValue({ type: "doc", content: [] }),
+  chain: vi.fn().mockReturnValue({
+    focus: vi.fn().mockReturnValue({
+      toggleBold: vi.fn().mockReturnValue({ run: vi.fn() }),
+    }),
+  }),
+  commands: {
+    setContent: vi.fn(),
+    focus: vi.fn(),
+    blur: vi.fn(),
+  },
+  setEditable: vi.fn(),
+};
+
+vi.mock("@tiptap/react", () => ({
+  useEditor: vi.fn().mockReturnValue(mockEditor),
+  EditorContent: ({ editor: _editor }: any) => <div data-testid="editor-content">Editor</div>,
+}));
+
+vi.mock("@tiptap/starter-kit", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-underline", () => ({ default: {} }));
+vi.mock("@tiptap/extension-link", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-placeholder", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-text-align", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-color", () => ({ Color: {} }));
+vi.mock("@tiptap/extension-text-style", () => ({ TextStyle: {} }));
+vi.mock("@tiptap/extension-highlight", () => ({
+  Highlight: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-subscript", () => ({ Subscript: {} }));
+vi.mock("@tiptap/extension-superscript", () => ({ Superscript: {} }));
+vi.mock("@tiptap/extension-task-list", () => ({ default: {} }));
+vi.mock("@tiptap/extension-task-item", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-image", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+
+import { createRef } from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+import type { RichEditorRef } from "../types";
+import { getEditorCSS } from "./editorStyles";
+
+const { TiptapEditor } = await import("./TiptapEditor");
+
+function withContext(
+  ui: React.ReactElement,
+  ctxProps?: { size?: any; compact?: boolean; disabled?: boolean },
+) {
+  return (
+    <RichEditorContext.Provider
+      size={ctxProps?.size ?? "$true"}
+      compact={ctxProps?.compact ?? false}
+      disabled={ctxProps?.disabled ?? false}
+    >
+      {ui}
+    </RichEditorContext.Provider>
+  );
+}
+
+describe("TiptapEditor", () => {
+  it("renders with getEditorCSS() styles applied, not inline hardcoded CSS", () => {
+    const { container } = renderWithProviders(withContext(<TiptapEditor />));
+
+    const styleTag = container.querySelector("style");
+    expect(styleTag).toBeTruthy();
+    // The CSS should contain Tamagui CSS custom properties
+    const cssContent = styleTag?.textContent ?? "";
+    expect(cssContent).toContain("var(--color");
+    // It should match the output from getEditorCSS
+    getEditorCSS();
+    expect(cssContent).toContain(".ProseMirror");
+    expect(cssContent).toContain("var(--blue10");
+  });
+
+  it("reads styling from RichEditorContext.useStyledContext()", () => {
+    // Render with compact and disabled context
+    const { container } = renderWithProviders(
+      withContext(<TiptapEditor />, {
+        size: "$2",
+        compact: true,
+        disabled: false,
+      }),
+    );
+
+    // Should render successfully with context values applied
+    expect(container.firstChild).toBeTruthy();
+    expect(container.querySelector("[data-testid='editor-content']")).toBeTruthy();
+  });
+
+  it("renders BubbleToolbar when showBubbleToolbar is true and does not when false", () => {
+    // With showBubbleToolbar={true}
+    const { container: withBubble } = renderWithProviders(
+      withContext(<TiptapEditor showBubbleToolbar />),
+    );
+    expect(withBubble.querySelector("[data-testid='bubble-menu']")).toBeTruthy();
+
+    // With showBubbleToolbar={false} (default)
+    const { container: withoutBubble } = renderWithProviders(
+      withContext(<TiptapEditor showBubbleToolbar={false} />),
+    );
+    expect(withoutBubble.querySelector("[data-testid='bubble-menu']")).toBeNull();
+  });
+
+  it("exposes RichEditorRef methods via forwardRef and useImperativeHandle", () => {
+    const ref = createRef<RichEditorRef>();
+
+    renderWithProviders(withContext(<TiptapEditor ref={ref} />));
+
+    expect(ref.current).toBeTruthy();
+    expect(typeof ref.current?.executeCommand).toBe("function");
+    expect(typeof ref.current?.getState).toBe("function");
+    expect(typeof ref.current?.getHTML).toBe("function");
+    expect(typeof ref.current?.getJSON).toBe("function");
+    expect(typeof ref.current?.setHTML).toBe("function");
+    expect(typeof ref.current?.setJSON).toBe("function");
+    expect(typeof ref.current?.focus).toBe("function");
+    expect(typeof ref.current?.blur).toBe("function");
+  });
+
+  it("does not include inline hardcoded CSS values", () => {
+    const { container } = renderWithProviders(withContext(<TiptapEditor />));
+
+    const styleTag = container.querySelector("style");
+    const cssContent = styleTag?.textContent ?? "";
+    // Should use CSS custom properties for theme-aware colors
+    expect(cssContent).toContain("var(--color12)");
+    expect(cssContent).toContain("var(--color8");
+  });
+});

package/src/editor/types.ts

@@ -0,0 +1,142 @@
+/**
+ * Shared types for the rich text editor
+ */
+
+export type TextAlignment = "left" | "center" | "right" | "justify";
+
+export type EditorCommand =
+  | "bold"
+  | "italic"
+  | "underline"
+  | "strike"
+  | "code"
+  | "subscript"
+  | "superscript"
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "heading6"
+  | "paragraph"
+  | "bulletList"
+  | "orderedList"
+  | "taskList"
+  | "blockquote"
+  | "codeBlock"
+  | "link"
+  | "image"
+  | "undo"
+  | "redo"
+  | "alignLeft"
+  | "alignCenter"
+  | "alignRight"
+  | "alignJustify"
+  | "textColor"
+  | "highlight"
+  | "horizontalRule"
+  | "clearFormatting";
+
+export interface EditorState {
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderline: boolean;
+  isStrike: boolean;
+  isCode: boolean;
+  isSubscript: boolean;
+  isSuperscript: boolean;
+  isHeading1: boolean;
+  isHeading2: boolean;
+  isHeading3: boolean;
+  isHeading4: boolean;
+  isHeading5: boolean;
+  isHeading6: boolean;
+  isParagraph: boolean;
+  isBulletList: boolean;
+  isOrderedList: boolean;
+  isTaskList: boolean;
+  isBlockquote: boolean;
+  isCodeBlock: boolean;
+  isLink: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+  textAlign: TextAlignment;
+  /** Current text color (null means default) */
+  textColor: string | null;
+  /** Current highlight/background color (null means none) */
+  highlightColor: string | null;
+}
+
+export interface RichEditorRef {
+  /** Execute an editor command */
+  executeCommand: (command: EditorCommand, payload?: any) => void;
+  /** Get the current editor state */
+  getState: () => EditorState;
+  /** Get the content as HTML */
+  getHTML: () => string;
+  /** Get the content as JSON (ProseMirror format) */
+  getJSON: () => any;
+  /** Set content from HTML */
+  setHTML: (html: string) => void;
+  /** Set content from JSON */
+  setJSON: (json: any) => void;
+  /** Focus the editor */
+  focus: () => void;
+  /** Blur the editor */
+  blur: () => void;
+}
+
+export interface RichEditorProps {
+  /** Initial content as HTML */
+  initialContent?: string;
+  /** Initial content as JSON (takes precedence over initialContent) */
+  initialJSON?: any;
+  /** Placeholder text when editor is empty */
+  placeholder?: string;
+  /** Whether the editor is editable */
+  editable?: boolean;
+  /** Auto focus on mount */
+  autoFocus?: boolean;
+  /** Called when content changes */
+  onChange?: (html: string, json: any) => void;
+  /** Called when editor state changes (bold, italic, etc.) */
+  onStateChange?: (state: EditorState) => void;
+  /** Called when editor is focused */
+  onFocus?: () => void;
+  /** Called when editor is blurred */
+  onBlur?: () => void;
+  /** Minimum height of the editor */
+  minHeight?: number;
+  /** Maximum height of the editor */
+  maxHeight?: number;
+  /** Show error state */
+  hasError?: boolean;
+}
+
+export const defaultEditorState: EditorState = {
+  isBold: false,
+  isItalic: false,
+  isUnderline: false,
+  isStrike: false,
+  isCode: false,
+  isSubscript: false,
+  isSuperscript: false,
+  isHeading1: false,
+  isHeading2: false,
+  isHeading3: false,
+  isHeading4: false,
+  isHeading5: false,
+  isHeading6: false,
+  isParagraph: true,
+  isBulletList: false,
+  isOrderedList: false,
+  isTaskList: false,
+  isBlockquote: false,
+  isCodeBlock: false,
+  isLink: false,
+  canUndo: false,
+  canRedo: false,
+  textAlign: "left",
+  textColor: null,
+  highlightColor: null,
+};