Merge branch 'main' into anchor-link

packages/editor-ext/src/index.ts

@@ -17,4 +17,5 @@ export * from "./lib/excalidraw";
 export * from "./lib/embed";
 export * from "./lib/mention";
 export * from "./lib/markdown";
+export * from "./lib/search-and-replace";
 export * from "./lib/embed-provider";

packages/editor-ext/src/lib/comment/comment.ts

@@ -1,5 +1,6 @@
 import { Mark, mergeAttributes } from "@tiptap/core";
 import { commentDecoration } from "./comment-decoration";
+import { Plugin } from "@tiptap/pm/state";
 
 export interface ICommentOptions {
   HTMLAttributes: Record<string, any>;
@@ -19,6 +20,7 @@ declare module "@tiptap/core" {
       unsetCommentDecoration: () => ReturnType;
       setComment: (commentId: string) => ReturnType;
       unsetComment: (commentId: string) => ReturnType;
+      setCommentResolved: (commentId: string, resolved: boolean) => ReturnType;
     };
   }
 }
@@ -53,6 +55,17 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
           };
         },
       },
+      resolved: {
+        default: false,
+        parseHTML: (element) => element.hasAttribute("data-resolved"),
+        renderHTML: (attributes) => {
+          if (!attributes.resolved) return {};
+
+          return {
+            "data-resolved": "true",
+          };
+        },
+      },
     };
   },
 
@@ -60,9 +73,18 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
     return [
       {
         tag: "span[data-comment-id]",
-        getAttrs: (el) =>
-          !!(el as HTMLSpanElement).getAttribute("data-comment-id")?.trim() &&
-          null,
+        getAttrs: (el) => {
+          const element = el as HTMLSpanElement;
+          const commentId = element.getAttribute("data-comment-id")?.trim();
+          const resolved = element.hasAttribute("data-resolved");
+
+          if (!commentId) return false;
+
+          return {
+            commentId,
+            resolved,
+          };
+        },
       },
     ];
   },
@@ -87,7 +109,8 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
         (commentId) =>
         ({ commands }) => {
           if (!commentId) return false;
-          return commands.setMark(this.name, { commentId });
+          // Just add the new mark, do not remove existing ones
+          return commands.setMark(this.name, { commentId, resolved: false });
         },
       unsetComment:
         (commentId) =>
@@ -101,7 +124,7 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
             const commentMark = node.marks.find(
               (mark) =>
                 mark.type.name === this.name &&
-                mark.attrs.commentId === commentId,
+                mark.attrs.commentId === commentId
             );
 
             if (commentMark) {
@@ -109,6 +132,37 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
             }
           });
 
+          return dispatch?.(tr);
+        },
+      setCommentResolved:
+        (commentId, resolved) =>
+        ({ tr, dispatch }) => {
+          if (!commentId) return false;
+
+          tr.doc.descendants((node, pos) => {
+            const from = pos;
+            const to = pos + node.nodeSize;
+
+            const commentMark = node.marks.find(
+              (mark) =>
+                mark.type.name === this.name &&
+                mark.attrs.commentId === commentId
+            );
+
+            if (commentMark) {
+              // Remove the existing mark and add a new one with updated resolved state
+              tr = tr.removeMark(from, to, commentMark);
+              tr = tr.addMark(
+                from,
+                to,
+                this.type.create({
+                  commentId: commentMark.attrs.commentId,
+                  resolved: resolved,
+                })
+              );
+            }
+          });
+
           return dispatch?.(tr);
         },
     };
@@ -116,13 +170,15 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
 
   renderHTML({ HTMLAttributes }) {
     const commentId = HTMLAttributes?.["data-comment-id"] || null;
+    const resolved = HTMLAttributes?.["data-resolved"] || false;
 
     if (typeof window === "undefined" || typeof document === "undefined") {
       return [
         "span",
         mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-          class: 'comment-mark',
+          class: resolved ? "comment-mark resolved" : "comment-mark",
           "data-comment-id": commentId,
+          ...(resolved && { "data-resolved": "true" }),
         }),
         0,
       ];
@@ -131,9 +187,14 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
     const elem = document.createElement("span");
 
     Object.entries(
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
     ).forEach(([attr, val]) => elem.setAttribute(attr, val));
 
+    // Add resolved class if the comment is resolved
+    if (resolved) {
+      elem.classList.add("resolved");
+    }
+
     elem.addEventListener("click", (e) => {
       const selection = document.getSelection();
       if (selection.type === "Range") return;
@@ -141,7 +202,7 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
       this.storage.activeCommentId = commentId;
       const commentEventClick = new CustomEvent("ACTIVE_COMMENT_EVENT", {
         bubbles: true,
-        detail: { commentId },
+        detail: { commentId, resolved },
       });
 
       elem.dispatchEvent(commentEventClick);
@@ -150,9 +211,7 @@ export const Comment = Mark.create<ICommentOptions, ICommentStorage>({
     return elem;
   },
 
-  // @ts-ignore
   addProseMirrorPlugins(): Plugin[] {
-    // @ts-ignore
     return [commentDecoration()];
   },
 });

packages/editor-ext/src/lib/custom-code-block.ts

@@ -35,6 +35,42 @@ export const CustomCodeBlock = CodeBlockLowlight.extend<CustomCodeBlockOptions>(
             return true;
           }
         },
+        "Mod-a": () => {
+          if (this.editor.isActive("codeBlock")) {
+            const { state } = this.editor;
+            const { $from } = state.selection;
+            
+            let codeBlockNode = null;
+            let codeBlockPos = null;
+            let depth = 0;
+            
+            for (depth = $from.depth; depth > 0; depth--) {
+              const node = $from.node(depth);
+              if (node.type.name === "codeBlock") {
+                codeBlockNode = node;
+                codeBlockPos = $from.start(depth) - 1;
+                break;
+              }
+            }
+            
+            if (codeBlockNode && codeBlockPos !== null) {
+              const codeBlockStart = codeBlockPos;
+              const codeBlockEnd = codeBlockPos + codeBlockNode.nodeSize;
+              
+              const contentStart = codeBlockStart + 1;
+              const contentEnd = codeBlockEnd - 1;
+              
+              this.editor.commands.setTextSelection({
+                from: contentStart,
+                to: contentEnd,
+              });
+              
+              return true;
+            }
+          }
+          
+          return false;
+        },
       };
     },
 

packages/editor-ext/src/lib/embed.ts

@@ -1,5 +1,6 @@
 import { Node, mergeAttributes } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
+import { sanitizeUrl } from './utils';
 
 export interface EmbedOptions {
   HTMLAttributes: Record<string, any>;
@@ -40,9 +41,12 @@ export const Embed = Node.create<EmbedOptions>({
     return {
       src: {
         default: '',
-        parseHTML: (element) => element.getAttribute('data-src'),
+        parseHTML: (element) => {
+          const src = element.getAttribute('data-src');
+          return sanitizeUrl(src);
+        },
         renderHTML: (attributes: EmbedAttributes) => ({
-          'data-src': attributes.src,
+          'data-src': sanitizeUrl(attributes.src),
         }),
       },
       provider: {
@@ -85,6 +89,9 @@ export const Embed = Node.create<EmbedOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
+    const src = HTMLAttributes["data-src"];
+    const safeHref = sanitizeUrl(src);
+    
     return [
       "div",
       mergeAttributes(
@@ -95,10 +102,10 @@ export const Embed = Node.create<EmbedOptions>({
       [
         "a",
         {
-          href: HTMLAttributes["data-src"],
+          href: safeHref,
           target: "blank",
         },
-        `${HTMLAttributes["data-src"]}`,
+        safeHref,
       ],
     ];
   },
@@ -108,9 +115,15 @@ export const Embed = Node.create<EmbedOptions>({
       setEmbed:
         (attrs: EmbedAttributes) =>
         ({ commands }) => {
+          // Validate the URL before inserting
+          const validatedAttrs = {
+            ...attrs,
+            src: sanitizeUrl(attrs.src),
+          };
+          
           return commands.insertContent({
             type: 'embed',
-            attrs: attrs,
+            attrs: validatedAttrs,
           });
         },
     };

packages/editor-ext/src/lib/search-and-replace/index.ts

@@ -0,0 +1,3 @@
+import { SearchAndReplace } from './search-and-replace'
+export * from './search-and-replace'
+export default SearchAndReplace

packages/editor-ext/src/lib/search-and-replace/search-and-replace.ts

@@ -0,0 +1,455 @@
+/***
+ MIT License
+ Copyright (c) 2023 - 2024 Jeet Mandaliya (Github Username: sereneinserenade)
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ ***/
+
+import { Extension, Range, type Dispatch } from "@tiptap/core";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import {
+  Plugin,
+  PluginKey,
+  type EditorState,
+  type Transaction,
+} from "@tiptap/pm/state";
+import { Node as PMNode, Mark } from "@tiptap/pm/model";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    search: {
+      /**
+       * @description Set search term in extension.
+       */
+      setSearchTerm: (searchTerm: string) => ReturnType;
+      /**
+       * @description Set replace term in extension.
+       */
+      setReplaceTerm: (replaceTerm: string) => ReturnType;
+      /**
+       * @description Set case sensitivity in extension.
+       */
+      setCaseSensitive: (caseSensitive: boolean) => ReturnType;
+      /**
+       * @description Reset current search result to first instance.
+       */
+      resetIndex: () => ReturnType;
+      /**
+       * @description Find next instance of search result.
+       */
+      nextSearchResult: () => ReturnType;
+      /**
+       * @description Find previous instance of search result.
+       */
+      previousSearchResult: () => ReturnType;
+      /**
+       * @description Replace first instance of search result with given replace term.
+       */
+      replace: () => ReturnType;
+      /**
+       * @description Replace all instances of search result with given replace term.
+       */
+      replaceAll: () => ReturnType;
+      /**
+       * @description Find selected instance of search result.
+       */
+      selectCurrentItem: () => ReturnType;
+    };
+  }
+}
+
+interface TextNodesWithPosition {
+  text: string;
+  pos: number;
+}
+
+const getRegex = (
+  s: string,
+  disableRegex: boolean,
+  caseSensitive: boolean,
+): RegExp => {
+  return RegExp(
+    disableRegex ? s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") : s,
+    caseSensitive ? "gu" : "gui",
+  );
+};
+
+interface ProcessedSearches {
+  decorationsToReturn: DecorationSet;
+  results: Range[];
+}
+
+function processSearches(
+  doc: PMNode,
+  searchTerm: RegExp,
+  searchResultClass: string,
+  resultIndex: number,
+): ProcessedSearches {
+  const decorations: Decoration[] = [];
+  const results: Range[] = [];
+
+  let textNodesWithPosition: TextNodesWithPosition[] = [];
+  let index = 0;
+
+  if (!searchTerm) {
+    return {
+      decorationsToReturn: DecorationSet.empty,
+      results: [],
+    };
+  }
+
+  doc?.descendants((node, pos) => {
+    if (node.isText) {
+      if (textNodesWithPosition[index]) {
+        textNodesWithPosition[index] = {
+          text: textNodesWithPosition[index].text + node.text,
+          pos: textNodesWithPosition[index].pos,
+        };
+      } else {
+        textNodesWithPosition[index] = {
+          text: `${node.text}`,
+          pos,
+        };
+      }
+    } else {
+      index += 1;
+    }
+  });
+
+  textNodesWithPosition = textNodesWithPosition.filter(Boolean);
+
+  for (const element of textNodesWithPosition) {
+    const { text, pos } = element;
+    const matches = Array.from(text.matchAll(searchTerm)).filter(
+      ([matchText]) => matchText.trim(),
+    );
+
+    for (const m of matches) {
+      if (m[0] === "") break;
+
+      if (m.index !== undefined) {
+        results.push({
+          from: pos + m.index,
+          to: pos + m.index + m[0].length,
+        });
+      }
+    }
+  }
+
+  for (let i = 0; i < results.length; i += 1) {
+    const r = results[i];
+    const className =
+      i === resultIndex
+        ? `${searchResultClass} ${searchResultClass}-current`
+        : searchResultClass;
+    const decoration: Decoration = Decoration.inline(r.from, r.to, {
+      class: className,
+    });
+
+    decorations.push(decoration);
+  }
+
+  return {
+    decorationsToReturn: DecorationSet.create(doc, decorations),
+    results,
+  };
+}
+
+const replace = (
+  replaceTerm: string,
+  results: Range[],
+  resultIndex: number,
+  { state, dispatch }: { state: EditorState; dispatch: Dispatch },
+) => {
+  const firstResult = results[resultIndex];
+
+  if (!firstResult) return;
+
+  const { from, to } = results[resultIndex];
+
+  if (dispatch) {
+    const tr = state.tr;
+    
+    // Get all marks that span the text being replaced
+    const marksSet = new Set<Mark>();
+    state.doc.nodesBetween(from, to, (node) => {
+      if (node.isText && node.marks) {
+        node.marks.forEach(mark => marksSet.add(mark));
+      }
+    });
+    
+    const marks = Array.from(marksSet);
+    
+    // Delete the old text and insert new text with preserved marks
+    tr.delete(from, to);
+    tr.insert(from, state.schema.text(replaceTerm, marks));
+    
+    dispatch(tr);
+  }
+};
+
+const replaceAll = (
+  replaceTerm: string,
+  results: Range[],
+  { tr, dispatch }: { tr: Transaction; dispatch: Dispatch },
+) => {
+  const resultsCopy = results.slice();
+
+  if (!resultsCopy.length) return;
+
+  // Process replacements in reverse order to avoid position shifting issues
+  for (let i = resultsCopy.length - 1; i >= 0; i -= 1) {
+    const { from, to } = resultsCopy[i];
+    
+    // Get all marks that span the text being replaced
+    const marksSet = new Set<Mark>();
+    tr.doc.nodesBetween(from, to, (node) => {
+      if (node.isText && node.marks) {
+        node.marks.forEach(mark => marksSet.add(mark));
+      }
+    });
+    
+    const marks = Array.from(marksSet);
+    
+    // Delete and insert with preserved marks
+    tr.delete(from, to);
+    tr.insert(from, tr.doc.type.schema.text(replaceTerm, marks));
+  }
+
+  dispatch(tr);
+};
+
+export const searchAndReplacePluginKey = new PluginKey(
+  "searchAndReplacePlugin",
+);
+
+export interface SearchAndReplaceOptions {
+  searchResultClass: string;
+  disableRegex: boolean;
+}
+
+export interface SearchAndReplaceStorage {
+  searchTerm: string;
+  replaceTerm: string;
+  results: Range[];
+  lastSearchTerm: string;
+  caseSensitive: boolean;
+  lastCaseSensitive: boolean;
+  resultIndex: number;
+  lastResultIndex: number;
+}
+
+export const SearchAndReplace = Extension.create<
+  SearchAndReplaceOptions,
+  SearchAndReplaceStorage
+>({
+  name: "searchAndReplace",
+
+  addOptions() {
+    return {
+      searchResultClass: "search-result",
+      disableRegex: true,
+    };
+  },
+
+  addStorage() {
+    return {
+      searchTerm: "",
+      replaceTerm: "",
+      results: [],
+      lastSearchTerm: "",
+      caseSensitive: false,
+      lastCaseSensitive: false,
+      resultIndex: 0,
+      lastResultIndex: 0,
+    };
+  },
+
+  addCommands() {
+    return {
+      setSearchTerm:
+        (searchTerm: string) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.searchTerm = searchTerm;
+
+          return false;
+        },
+      setReplaceTerm:
+        (replaceTerm: string) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.replaceTerm = replaceTerm;
+
+          return false;
+        },
+      setCaseSensitive:
+        (caseSensitive: boolean) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.caseSensitive = caseSensitive;
+
+          return false;
+        },
+      resetIndex:
+        () =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.resultIndex = 0;
+
+          return false;
+        },
+      nextSearchResult:
+        () =>
+        ({ editor }) => {
+          const { results, resultIndex } = editor.storage.searchAndReplace;
+
+          const nextIndex = resultIndex + 1;
+
+          if (results[nextIndex]) {
+            editor.storage.searchAndReplace.resultIndex = nextIndex;
+          } else {
+            editor.storage.searchAndReplace.resultIndex = 0;
+          }
+
+          return false;
+        },
+      previousSearchResult:
+        () =>
+        ({ editor }) => {
+          const { results, resultIndex } = editor.storage.searchAndReplace;
+
+          const prevIndex = resultIndex - 1;
+
+          if (results[prevIndex]) {
+            editor.storage.searchAndReplace.resultIndex = prevIndex;
+          } else {
+            editor.storage.searchAndReplace.resultIndex = results.length - 1;
+          }
+
+          return false;
+        },
+      replace:
+        () =>
+        ({ editor, state, dispatch }) => {
+          const { replaceTerm, results, resultIndex } =
+            editor.storage.searchAndReplace;
+
+          replace(replaceTerm, results, resultIndex, { state, dispatch });
+
+          // After replace, adjust index if needed
+          // The results will be recalculated by the plugin, but we need to ensure
+          // the index doesn't exceed the new bounds
+          setTimeout(() => {
+            const newResultsLength = editor.storage.searchAndReplace.results.length;
+            if (newResultsLength > 0 && editor.storage.searchAndReplace.resultIndex >= newResultsLength) {
+              // Keep the same position if possible, otherwise go to the last result
+              editor.storage.searchAndReplace.resultIndex = Math.min(resultIndex, newResultsLength - 1);
+            }
+          }, 0);
+
+          return false;
+        },
+      replaceAll:
+        () =>
+        ({ editor, tr, dispatch }) => {
+          const { replaceTerm, results } = editor.storage.searchAndReplace;
+
+          replaceAll(replaceTerm, results, { tr, dispatch });
+
+          return false;
+        },
+      selectCurrentItem:
+        () =>
+        ({ editor }) => {
+          const { results } = editor.storage.searchAndReplace;
+          for (let i = 0; i < results.length; i++) {
+            if (
+              results[i].from == editor.state.selection.from &&
+              results[i].to == editor.state.selection.to
+            ) {
+              editor.storage.searchAndReplace.resultIndex = i;
+            }
+          }
+          return false;
+        },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    const { searchResultClass, disableRegex } = this.options;
+
+    const setLastSearchTerm = (t: string) =>
+      (editor.storage.searchAndReplace.lastSearchTerm = t);
+    const setLastCaseSensitive = (t: boolean) =>
+      (editor.storage.searchAndReplace.lastCaseSensitive = t);
+    const setLastResultIndex = (t: number) =>
+      (editor.storage.searchAndReplace.lastResultIndex = t);
+
+    return [
+      new Plugin({
+        key: searchAndReplacePluginKey,
+        state: {
+          init: () => DecorationSet.empty,
+          apply({ doc, docChanged }, oldState) {
+            const {
+              searchTerm,
+              lastSearchTerm,
+              caseSensitive,
+              lastCaseSensitive,
+              resultIndex,
+              lastResultIndex,
+            } = editor.storage.searchAndReplace;
+
+            if (
+              !docChanged &&
+              lastSearchTerm === searchTerm &&
+              lastCaseSensitive === caseSensitive &&
+              lastResultIndex === resultIndex
+            )
+              return oldState;
+
+            setLastSearchTerm(searchTerm);
+            setLastCaseSensitive(caseSensitive);
+            setLastResultIndex(resultIndex);
+
+            if (!searchTerm) {
+              editor.storage.searchAndReplace.results = [];
+              return DecorationSet.empty;
+            }
+
+            const { decorationsToReturn, results } = processSearches(
+              doc,
+              getRegex(searchTerm, disableRegex, caseSensitive),
+              searchResultClass,
+              resultIndex,
+            );
+
+            editor.storage.searchAndReplace.results = results;
+
+            return decorationsToReturn;
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default SearchAndReplace;

packages/editor-ext/src/lib/table/cell.ts

@@ -2,5 +2,36 @@ import { TableCell as TiptapTableCell } from "@tiptap/extension-table-cell";
 
 export const TableCell = TiptapTableCell.extend({
   name: "tableCell",
-  content: "paragraph+",
+  content: "(paragraph | heading | bulletList | orderedList | taskList | blockquote | callout | image | video | attachment | mathBlock | details | codeBlock)+",
+  
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.style.backgroundColor || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColor) {
+            return {};
+          }
+          return {
+            style: `background-color: ${attributes.backgroundColor}`,
+            'data-background-color': attributes.backgroundColor,
+          };
+        },
+      },
+      backgroundColorName: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-background-color-name') || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColorName) {
+            return {};
+          }
+          return {
+            'data-background-color-name': attributes.backgroundColorName.toLowerCase(),
+          };
+        },
+      },
+    };
+  },
 });

packages/editor-ext/src/lib/table/header.ts

@@ -0,0 +1,37 @@
+import { TableHeader as TiptapTableHeader } from "@tiptap/extension-table-header";
+
+export const TableHeader = TiptapTableHeader.extend({
+  name: "tableHeader",
+  content: "(paragraph | heading | bulletList | orderedList | taskList | blockquote | callout | image | video | attachment | mathBlock | details | codeBlock)+",
+  
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.style.backgroundColor || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColor) {
+            return {};
+          }
+          return {
+            style: `background-color: ${attributes.backgroundColor}`,
+            'data-background-color': attributes.backgroundColor,
+          };
+        },
+      },
+      backgroundColorName: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-background-color-name') || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColorName) {
+            return {};
+          }
+          return {
+            'data-background-color-name': attributes.backgroundColorName.toLowerCase(),
+          };
+        },
+      },
+    };
+  },
+});

packages/editor-ext/src/lib/table/index.ts

@@ -1,2 +1,4 @@
 export * from "./row";
 export * from "./cell";
+export * from "./header";
+export * from "./table";

packages/editor-ext/src/lib/table/table.ts

@@ -0,0 +1,65 @@
+import Table from "@tiptap/extension-table";
+import { Editor } from "@tiptap/core";
+
+const LIST_TYPES = ["bulletList", "orderedList", "taskList"];
+
+function isInList(editor: Editor): boolean {
+  const { $from } = editor.state.selection;
+  
+  for (let depth = $from.depth; depth > 0; depth--) {
+    const node = $from.node(depth);
+    if (LIST_TYPES.includes(node.type.name)) {
+      return true;
+    }
+  }
+  
+  return false;
+}
+
+function handleListIndent(editor: Editor): boolean {
+  return editor.commands.sinkListItem("listItem") || 
+         editor.commands.sinkListItem("taskItem");
+}
+
+function handleListOutdent(editor: Editor): boolean {
+  return editor.commands.liftListItem("listItem") || 
+         editor.commands.liftListItem("taskItem");
+}
+
+export const CustomTable = Table.extend({
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      Tab: () => {
+        // If we're in a list within a table, handle list indentation
+        if (isInList(this.editor) && this.editor.isActive("table")) {
+          if (handleListIndent(this.editor)) {
+            return true;
+          }
+        }
+
+        // Otherwise, use default table navigation
+        if (this.editor.commands.goToNextCell()) {
+          return true;
+        }
+
+        if (!this.editor.can().addRowAfter()) {
+          return false;
+        }
+
+        return this.editor.chain().addRowAfter().goToNextCell().run();
+      },
+      "Shift-Tab": () => {
+        // If we're in a list within a table, handle list outdentation
+        if (isInList(this.editor) && this.editor.isActive("table")) {
+          if (handleListOutdent(this.editor)) {
+            return true;
+          }
+        }
+
+        // Otherwise, use default table navigation
+        return this.editor.commands.goToPreviousCell();
+      },
+    };
+  },
+});

packages/editor-ext/src/lib/utils.ts

@@ -4,6 +4,7 @@ import { Selection, Transaction } from "@tiptap/pm/state";
 import { CellSelection, TableMap } from "@tiptap/pm/tables";
 import { Node, ResolvedPos } from "@tiptap/pm/model";
 import Table from "@tiptap/extension-table";
+import { sanitizeUrl as braintreeSanitizeUrl } from "@braintree/sanitize-url";
 
 export const isRectSelected = (rect: any) => (selection: CellSelection) => {
   const map = TableMap.get(selection.$anchorCell.node(-1));
@@ -379,3 +380,12 @@ export function setAttributes(
 export function icon(name: string) {
   return `<span class="ProseMirror-icon ProseMirror-icon-${name}"></span>`;
 }
+
+export function sanitizeUrl(url: string | undefined): string {
+  if (!url) return "";
+  
+  const sanitized = braintreeSanitizeUrl(url);
+  
+  // Return empty string instead of "about:blank"
+  return sanitized === "about:blank" ? "" : sanitized;
+}