collavre 0.22.0 → 0.24.0

data/app/controllers/concerns/collavre/api/authenticatable.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Collavre
+  module Api
+    module Authenticatable
+      extend ActiveSupport::Concern
+
+      private
+
+      def extract_bearer_token
+        auth_header = request.headers["Authorization"]
+        return nil unless auth_header&.start_with?("Bearer ")
+
+        auth_header.sub("Bearer ", "")
+      end
+
+      # Resolves the bearer token to a user via Doorkeeper, sets
+      # Collavre::Current.user, and returns the user. Returns nil (without
+      # rendering) when the token is blank/invalid/inaccessible or the user
+      # is missing — callers own the error response, because the two API
+      # engines render different error envelopes.
+      def find_user_by_bearer_token(token)
+        return nil if token.blank?
+
+        access_token = Doorkeeper::AccessToken.by_token(token)
+        return nil unless access_token&.accessible?
+
+        user = Collavre::User.find_by(id: access_token.resource_owner_id)
+        return nil unless user
+
+        Collavre::Current.user = user
+        user
+      end
+
+      def current_user
+        Collavre::Current.user
+      end
+    end
+  end
+end

data/app/controllers/concerns/collavre/users_controller/profile_and_settings.rb

@@ -58,6 +58,14 @@ module Collavre
       end
     end
 
+    def typo_correction
+      @user = Collavre::User.find(params[:id])
+
+      unless @user == Current.user || Current.user.system_admin?
+        redirect_to user_path(Current.user), alert: I18n.t("collavre.users.destroy.not_authorized")
+      end
+    end
+
     def update_password
       @user = Collavre::User.find(params[:id])
       if @user.authenticate(params[:user][:current_password])
@@ -89,7 +97,14 @@ module Collavre
         :notifications_enabled,
         :calendar_id,
         :timezone,
-        :locale
+        :locale,
+        :typo_correction_enabled,
+        :typo_correction_threshold,
+        :typo_correction_on_soft_keyboard,
+        :typo_correction_on_voice,
+        :typo_correction_on_physical_keyboard,
+        :typo_correction_in_chat,
+        :typo_correction_in_editor
       ).tap do |p|
         p[:locale] = normalize_supported_locale(p[:locale]) if p.key?(:locale)
       end

data/app/controllers/concerns/collavre/users_controller/registration.rb

@@ -37,7 +37,34 @@ module Collavre
             Collavre::Contact.ensure(user: invitation.inviter, contact_user: @user)
             invitation.creative.create_linked_creative_for_user(@user)
           end
-          Collavre::EmailVerificationMailer.verify(@user).deliver_later
+          # Deployments with no outbound mail (e.g. the local desktop app, which
+          # has no SMTP/SES) would otherwise leave the first user unable to verify
+          # and permanently locked out of login. Such envs opt into auto-verify.
+          # NB: compare to `true` explicitly — an unset config.x.* key reads back
+          # as a truthy empty OrderedOptions, so a bare `if` would fire everywhere.
+          if Rails.application.config.x.auto_verify_email == true
+            @user.update_column(:email_verified_at, Time.current)
+          else
+            Collavre::EmailVerificationMailer.verify(@user).deliver_later
+          end
+          # Envs that ship no seeded admin (e.g. desktop) bootstrap one here: the
+          # first registered user becomes system_admin. Guarded by "no admin yet"
+          # so only the very first signup is elevated, and by a loopback origin so
+          # that in documented open mode (LAN/Tailscale binding) a remote client
+          # cannot race the local owner for the admin account. `== true` for the
+          # same OrderedOptions reason as above.
+          if Rails.application.config.x.bootstrap_first_admin == true && request_from_loopback?
+            # Promote atomically rather than exists?-then-update: a separate check
+            # and write is a TOCTOU race where two concurrent first signups both
+            # read "no admin yet" and both elevate. A single UPDATE ... WHERE NOT
+            # EXISTS lets the DB evaluate the guard and write under one lock, so
+            # exactly one wins. This path only runs on desktop (the only env that
+            # sets bootstrap_first_admin), which is always SQLite — and SQLite
+            # serializes writers, so the loser's re-evaluated NOT EXISTS sees the
+            # admin and updates nothing.
+            admin_exists = Collavre::User.where(system_admin: true).arel.exists
+            Collavre::User.where(id: @user.id).where(admin_exists.not).update_all(system_admin: true)
+          end
           session.delete(:return_to_after_authenticating)
           redirect_to new_session_path, notice: I18n.t("collavre.users.new.success_sign_up")
         else
@@ -56,6 +83,19 @@ module Collavre
 
     private
 
+    # Whether the request originates from the local machine. Uses remote_addr
+    # (the socket peer) rather than remote_ip: remote_ip trusts X-Forwarded-For
+    # from private-range proxies, so a LAN attacker at e.g. 192.168.x could spoof
+    # `XFF: 127.0.0.1` and forge a loopback origin. The socket peer cannot be
+    # spoofed by headers.
+    def request_from_loopback?
+      addr = IPAddr.new(request.remote_addr.to_s)
+      addr = addr.native if addr.respond_to?(:ipv4_mapped?) && addr.ipv4_mapped?
+      addr.loopback?
+    rescue IPAddr::InvalidAddressError
+      false
+    end
+
     def user_params
       params.require(:user).permit(:email, :password, :password_confirmation, :name)
     end

data/app/errors/collavre/api_error.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Collavre
+  # Raised inside collavre-core API v1 controllers to produce the canonical
+  # single-message JSON envelope `{ error: "<message>" }` at a chosen status,
+  # via the rescue_from in Collavre::Api::V1::BaseController.
+  #
+  # NOTE: this is the collavre-core `{error: "str"}` shape only. It is NOT for
+  # the 422 validation-array shape `{errors: [...]}` (client retry contract),
+  # nor the OpenAI-nested shape in collavre_completion_api. Do not route those
+  # through this class.
+  class ApiError < StandardError
+    attr_reader :status
+
+    def initialize(message, status: :unprocessable_entity)
+      super(message)
+      @status = status
+    end
+  end
+end

data/app/helpers/collavre/application_helper.rb

@@ -14,6 +14,7 @@ module Collavre
       collavre/org_chart
       collavre/popup
       collavre/comments_popup
+      collavre/tables
       collavre/code_highlight
       collavre/comment_versions
       collavre/mention_menu

data/app/helpers/collavre/creatives_helper.rb

@@ -18,14 +18,25 @@ module Collavre
     end
 
     def render_creative_tags(creative)
-      labels = creative.tags&.includes(:label)&.map(&:label)&.compact
+      # The browse tree preloads tags -> label per level; `includes` on an
+      # already-loaded association builds a fresh relation and re-queries it,
+      # which would reinstate the N+1 this is called from.
+      labels = if creative.tags.loaded?
+        creative.tags.map(&:label).compact
+      else
+        creative.tags&.includes(:label)&.map(&:label)&.compact
+      end
       return "" if labels&.empty?
       content_tag(:div, class: "creative-tags", style: "display: none;") do
         render_tags(labels, "unstyled-link", true)
       end
     end
 
-    def render_creative_progress(creative, select_mode: false, has_children: nil)
+    # `can_write`, `can_feedback` and `unread_count` let a caller rendering many
+    # creatives at once (the browse tree) resolve them in batch and hand them in.
+    # Left nil, each is resolved for this creative alone — correct, but a query
+    # per node. Single-creative call sites take that path.
+    def render_creative_progress(creative, select_mode: false, has_children: nil, can_write: nil, can_feedback: nil, unread_count: nil)
       progress_value = if params[:tags].present?
         tag_ids = Array(params[:tags]).map(&:to_s)
         creative.filtered_progress || creative.progress_for_tags(tag_ids) || 0
@@ -33,15 +44,15 @@ module Collavre
         creative.progress
       end
 
+      can_feedback = creative.has_permission?(Current.user, :feedback) if can_feedback.nil?
+
       content_tag(:div, class: "creative-row-end") do
         comment_part = if creative.archived?
           safe_join([])
-        elsif creative.has_permission?(Current.user, :feedback)
+        elsif can_feedback
           origin = creative.effective_origin
-          comments_count = origin.comments.size
-          pointer = CommentReadPointer.find_by(user: Current.user, creative: origin)
-          last_read_id = pointer&.last_read_comment_id
-          unread_count = last_read_id ? origin.comments.where("id > ? and private = ?", last_read_id, false).count : comments_count
+          comments_count = origin.comments_count
+          unread_count = unread_count_for(origin, comments_count) if unread_count.nil?
           if Current.user && CommentPresenceStore.list(origin.id).include?(Current.user.id)
             unread_count = 0
           end
@@ -70,7 +81,7 @@ module Collavre
           safe_join([])
         end
         is_leaf = has_children.nil? ? !creative.children.exists? : !has_children
-        can_write = creative.has_permission?(Current.user, :write)
+        can_write = creative.has_permission?(Current.user, :write) if can_write.nil?
         progress_part = if is_leaf && can_write && !select_mode
           render_progress_toggle(creative, progress_value)
         else
@@ -86,6 +97,17 @@ module Collavre
       end
     end
 
+    # Unread comments on `origin` for the current user. With no read pointer,
+    # every comment is unread. Batched by CommentBadgeIndex for the browse tree;
+    # this is the single-creative path.
+    def unread_count_for(origin, comments_count)
+      pointer = CommentReadPointer.find_by(user: Current.user, creative: origin)
+      last_read_id = pointer&.last_read_comment_id
+      return comments_count unless last_read_id
+
+      origin.comments.where("id > ? and private = ?", last_read_id, false).count
+    end
+
     def render_progress_toggle(creative, value)
       complete = value == 1
       new_value = complete ? 0 : 1

data/app/javascript/collavre.js

@@ -5,6 +5,7 @@
 import "./modules/creatives"
 import "./modules/creative_row_swipe"
 import "./modules/mention_menu"
+import "./modules/typo_corrector"
 import "./modules/command_menu"
 import "./modules/modal_dialog"
 import "./modules/export_to_markdown"
@@ -19,6 +20,7 @@ import "./components/creative_tree_row"
 // Import and re-export lib utilities
 import "./lib/apply_lexical_styles"
 import "./lib/turbo_stream_actions"
+import "./lib/turbo_confirm"
 
 // Export controller registration
 export { registerControllers } from "./controllers"

data/app/javascript/components/ImageResizer.jsx

@@ -51,9 +51,15 @@ export default function ImageResizer({ src, altText, width, height, nodeKey }) {
       editor.registerCommand(
         CLICK_COMMAND,
         (event) => {
-          // If click is outside our image, deselect
+          // If click is outside our image, deselect — but only via clearSelection.
+          // setSelected(false) is destructive here: when the click lands in text
+          // (a RangeSelection / the caret), the hook synthesizes a fresh empty
+          // NodeSelection and replaces the caret with it, so the editor loses its
+          // caret and becomes uneditable the instant you click to edit while an
+          // image is present. clearSelection only acts on an existing
+          // NodeSelection, so a RangeSelection (caret) is preserved.
           if (containerRef.current && !containerRef.current.contains(event.target)) {
-            setSelected(false)
+            clearSelection()
           }
           return false
         },
@@ -90,7 +96,7 @@ export default function ImageResizer({ src, altText, width, height, nodeKey }) {
         COMMAND_PRIORITY_LOW
       )
     )
-  }, [editor, isSelected, nodeKey, setSelected])
+  }, [editor, isSelected, nodeKey, clearSelection])
 
   // Resize logic
   const onPointerDown = useCallback(

data/app/javascript/components/InlineLexicalEditor.jsx

@@ -15,12 +15,14 @@ import { HeadingNode, QuoteNode, $isHeadingNode, $isQuoteNode } from "@lexical/r
 import {
   CodeNode,
   CodeHighlightNode,
-  $createCodeNode,
   $isCodeNode,
   registerCodeHighlighting
 } from "@lexical/code"
 import { ListItemNode, ListNode, $isListItemNode, $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list"
 import { $createLinkNode, LinkNode, AutoLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link"
+import { TableNode, TableRowNode, TableCellNode, INSERT_TABLE_COMMAND } from "@lexical/table"
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin"
+import TableHoverActionsPlugin from "./plugins/table_hover_actions_plugin"
 import {
   $createParagraphNode,
   $createTextNode,
@@ -51,10 +53,21 @@ import { AttachmentNode } from "../lib/lexical/attachment_node"
 import { VideoNode } from "../lib/lexical/video_node"
 import AttachmentCleanupPlugin from "./plugins/attachment_cleanup_plugin"
 import MarkdownShortcutsPlugin from "./plugins/markdown_shortcuts_plugin"
+import ListTabIndentPlugin from "./plugins/list_tab_indent_plugin"
 import { syncLexicalStyleAttributes } from "../lib/lexical/style_attributes"
+import { $toggleCodeBlockForSelection } from "../lib/lexical/code_block_toggle"
 import { lexicalHtmlConfig, normalizeColoredContainers } from "../lib/lexical/color_import"
 import { minimizeContentHtml } from "../lib/lexical/minimize_html"
+import { ensureTrailingParagraph, registerTrailingParagraph } from "../lib/lexical/trailing_paragraph"
+import {
+  MARKDOWN_TRANSFORMERS,
+  normalizeMarkdownBlankLines,
+  splitBlankLineParagraphs
+} from "../lib/lexical/markdown_serialize"
+import { $convertToMarkdownString } from "@lexical/markdown"
 import { updateResponsiveImages } from "../lib/responsive_images"
+import { CODE_TOKEN_THEME } from "../lib/editor/code_token_theme"
+import { detectCodeLanguage, normalizeFenceLang, bridgeCodeFenceLanguages, markLanguageResolved, isLanguageResolved, clearLanguageResolved } from "../lib/editor/code_languages"
 
 const URL_MATCHERS = [
   createLinkMatcherWithRegExp(/https?:\/\/[^\s<]+/gi, (text) => text)
@@ -71,40 +84,14 @@ const theme = {
   list: {
     ul: "lexical-list-ul",
     ol: "lexical-list-ol",
-    listitem: "lexical-list-item"
+    listitem: "lexical-list-item",
+    // Tag the wrapper <li> that only holds a nested list so its bullet marker
+    // can be hidden — without this Lexical reuses the plain item class and the
+    // empty wrapper renders a stray bullet above the indented sub-list.
+    nested: { listitem: "lexical-nested-list-item" }
   },
   code: "lexical-code-block",
-  codeHighlight: {
-    atrule: "lexical-token-atrule",
-    attr: "lexical-token-attr",
-    boolean: "lexical-token-boolean",
-    builtin: "lexical-token-builtin",
-    cdata: "lexical-token-cdata",
-    char: "lexical-token-char",
-    class: "lexical-token-class",
-    comment: "lexical-token-comment",
-    constant: "lexical-token-constant",
-    deleted: "lexical-token-deleted",
-    doctype: "lexical-token-doctype",
-    entity: "lexical-token-entity",
-    function: "lexical-token-function",
-    important: "lexical-token-important",
-    inserted: "lexical-token-inserted",
-    keyword: "lexical-token-keyword",
-    namespace: "lexical-token-namespace",
-    number: "lexical-token-number",
-    operator: "lexical-token-operator",
-    prolog: "lexical-token-prolog",
-    property: "lexical-token-property",
-    punctuation: "lexical-token-punctuation",
-    regex: "lexical-token-regex",
-    selector: "lexical-token-selector",
-    string: "lexical-token-string",
-    symbol: "lexical-token-symbol",
-    tag: "lexical-token-tag",
-    url: "lexical-token-url",
-    variable: "lexical-token-variable"
-  },
+  codeHighlight: CODE_TOKEN_THEME,
   link: "lexical-link",
   text: {
     bold: "lexical-text-bold",
@@ -112,7 +99,18 @@ const theme = {
     underline: "lexical-text-underline",
     strikethrough: "lexical-text-strike",
     code: "lexical-text-code"
-  }
+  },
+  table: "lexical-table",
+  tableScrollableWrapper: "lexical-table-wrapper",
+  tableRow: "lexical-table-row",
+  tableCell: "lexical-table-cell",
+  tableCellHeader: "lexical-table-cell-header",
+  tableSelected: "lexical-table-selected",
+  tableSelection: "lexical-table-selection",
+  tableAddRows: "lexical-table-add-rows",
+  tableAddColumns: "lexical-table-add-columns",
+  tableDeleteRows: "lexical-table-delete-rows",
+  tableDeleteColumns: "lexical-table-delete-columns"
 }
 
 function Placeholder({ text }) {
@@ -129,6 +127,9 @@ function InitialContentPlugin({ html }) {
     lastApplied.current = html
     editor.update(() => {
       const root = $getRoot()
+      // Re-importing replaces the tree; drop stale resolved-language keys so the
+      // registry only tracks nodes from this import.
+      clearLanguageResolved(editor)
       // Explicitly remove all children to ensure it's empty
       root.getChildren().forEach((child) => child.remove())
 
@@ -137,6 +138,15 @@ function InitialContentPlugin({ html }) {
       // No more .trix-content wrapper
       const container = doc.body
 
+      // @lexical/code's importer only reads `data-language`, but the language is
+      // encoded differently depending on which renderer produced this HTML:
+      // commonmarker (server reopen) uses `<pre lang>`, while renderMarkdown (the
+      // markdown→rich toggle) puts it on `<pre><code class="language-X">`. Bridge
+      // both onto `data-language` so an explicit fence language survives reopen
+      // instead of being dropped (and then defaulted to javascript). Detection
+      // still corrects unlabeled blocks.
+      bridgeCodeFenceLanguages(container)
+
       // Color / background-color are bound to text nodes during import by the
       // colorAwareSpanImport html config (see lib/lexical/color_import). We no
       // longer re-apply styles positionally after import, which used to drift
@@ -148,6 +158,23 @@ function InitialContentPlugin({ html }) {
       normalizeColoredContainers(container)
       const nodes = $generateNodesFromDOM(editor, container)
 
+      // Mark code blocks whose language came from an explicit source label as
+      // resolved BEFORE registerCodeHighlighting bakes the "javascript" default
+      // onto unlabeled ones. At this point a non-empty language can only be one
+      // the bridge set from a real fence/attribute, so the detection transform
+      // will honor it verbatim (incl. an explicit "javascript") and only
+      // re-detect the still-unlabeled blocks.
+      const markExplicitCodeLanguages = (list) => {
+        list.forEach((node) => {
+          if ($isCodeNode(node)) {
+            if (node.getLanguage()) markLanguageResolved(editor, node.getKey())
+          } else if ($isElementNode(node) && typeof node.getChildren === "function") {
+            markExplicitCodeLanguages(node.getChildren())
+          }
+        })
+      }
+      markExplicitCodeLanguages(nodes)
+
       // Filter out duplicate image nodes if any
       const uniqueNodes = []
       const seenImages = new Set()
@@ -215,12 +242,34 @@ function InitialContentPlugin({ html }) {
       if (root.getChildrenSize() === 0) {
         root.append($createParagraphNode())
       }
+
+      // A blank line the user typed is an empty paragraph, but the server renders
+      // it as a standalone <br> that re-imports as a paragraph holding a
+      // LineBreakNode — which Lexical draws as TWO lines, so blank lines grew by
+      // one on every reopen. Split those marker paragraphs back into empty
+      // paragraphs so reopened blank lines match freshly typed ones. Runs AFTER
+      // the trailing-empty cleanup above so an intentional trailing blank line
+      // (a marker paragraph the cleanup leaves alone) is preserved, not stripped.
+      splitBlankLineParagraphs(root)
+
+      // A trailing top-level image/video/attachment leaves no caret position
+      // after it, making the document uneditable. Guarantee an editable
+      // paragraph after it. (The RootNode transform below keeps this true while
+      // editing; this handles the initial load deterministically regardless of
+      // plugin effect ordering.)
+      ensureTrailingParagraph(root)
     })
   }, [editor, html])
 
   return null
 }
 
+function TrailingParagraphPlugin() {
+  const [editor] = useLexicalComposerContext()
+  useEffect(() => registerTrailingParagraph(editor), [editor])
+  return null
+}
+
 function LinkAttributesPlugin() {
   const [editor] = useLexicalComposerContext()
 
@@ -247,7 +296,34 @@ function CodeHighlightingPlugin() {
   const [editor] = useLexicalComposerContext()
 
   useEffect(() => {
-    return registerCodeHighlighting(editor)
+    const unregisterHighlight = registerCodeHighlighting(editor)
+
+    // registerCodeHighlighting bakes "javascript" onto any code block without a
+    // language (its tokenizer default), which then serializes into the canonical
+    // markdown as ```javascript — so Ruby/Python/etc. blocks get permanently
+    // mislabeled on the first edit. This transform re-detects the real language
+    // from the block's content whenever it's unconfirmed (missing or stuck on
+    // the javascript default) and corrects the node, so the editor shows — and
+    // saves — the right language. An explicit non-default language is left alone.
+    const unregisterDetect = editor.registerNodeTransform(CodeNode, (node) => {
+      // A language that came from an explicit source label on import is honored
+      // verbatim — including "javascript" — so auto-detection never overrides a
+      // deliberate choice. Only unlabeled/new blocks (baked to the javascript
+      // default) are re-detected from their content.
+      if (isLanguageResolved(editor, node.getKey())) return
+      const current = node.getLanguage()
+      const norm = normalizeFenceLang(current)
+      if (norm && norm !== "javascript") return
+      const detected = detectCodeLanguage(node.getTextContent(), current)
+      if (detected && detected !== "javascript" && detected !== current) {
+        node.setLanguage(detected)
+      }
+    })
+
+    return () => {
+      unregisterHighlight()
+      unregisterDetect()
+    }
   }, [editor])
 
   return null
@@ -474,6 +550,14 @@ function Toolbar() {
     [editor]
   )
 
+  const insertTable = useCallback(() => {
+    editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+      columns: "3",
+      rows: "3",
+      includeHeaders: true
+    })
+  }, [editor])
+
   const toggleLink = useCallback(() => {
     let hasLink = false
     let selectionText = ""
@@ -598,39 +682,7 @@ function Toolbar() {
 
   const toggleCodeBlock = useCallback(() => {
     editor.update(() => {
-      const selection = $getSelection()
-      if (!$isRangeSelection(selection)) return
-
-      const anchorNode = selection.anchor.getNode()
-      const topLevel = anchorNode.getTopLevelElement()
-      if (!topLevel) return
-
-      if ($isCodeNode(topLevel)) {
-        const textContent = topLevel.getTextContent()
-        const lines = textContent.split("\n")
-        const firstParagraph = $createParagraphNode()
-        firstParagraph.append($createTextNode(lines[0] || ""))
-        topLevel.replace(firstParagraph)
-        let previous = firstParagraph
-        for (let index = 1; index < lines.length; index += 1) {
-          const paragraph = $createParagraphNode()
-          paragraph.append($createTextNode(lines[index]))
-          previous.insertAfter(paragraph)
-          previous = paragraph
-        }
-        firstParagraph.selectEnd()
-        return
-      }
-
-      if (topLevel.getType?.() !== "paragraph") {
-        return
-      }
-
-      const codeNode = $createCodeNode()
-      const content = topLevel.getTextContent()
-      codeNode.append($createTextNode(content || ""))
-      topLevel.replace(codeNode)
-      codeNode.selectEnd()
+      $toggleCodeBlockForSelection()
     })
   }, [editor])
 
@@ -712,6 +764,14 @@ function Toolbar() {
         title="Numbered list">
         1.
       </button>
+      <button
+        type="button"
+        className="lexical-toolbar-btn"
+        onClick={insertTable}
+        title="Insert table"
+        aria-label="Insert table">
+        ▦
+      </button>
       <span className="lexical-toolbar-separator" aria-hidden="true" />
       <button
         type="button"
@@ -872,6 +932,16 @@ function EditorInner({
 }) {
   const [editor] = useLexicalComposerContext()
 
+  // Anchor for the floating table plugins (hover "+" and the cell action menu).
+  // Portaling into the editor's own subtree (not document.body) ties the floating
+  // UI's lifetime to the editor DOM: when the editor is torn down — including
+  // Turbo/host teardown that removes the container without a React unmount — the
+  // chevron button is removed with it instead of being orphaned in document.body.
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState(null)
+  const onAnchorRef = useCallback((el) => {
+    if (el !== null) setFloatingAnchorElem(el)
+  }, [])
+
   // File drop is handled by FileUploadPlugin's DROP_COMMAND handler.
   // We only need dragOver to allow the browser to accept file drops.
   const handleDragOver = useCallback((event) => {
@@ -883,7 +953,7 @@ function EditorInner({
   return (
     <div className="lexical-editor-shell">
       <Toolbar />
-      <div className="lexical-editor-inner">
+      <div className="lexical-editor-inner" ref={onAnchorRef}>
         <RichTextPlugin
           contentEditable={
             <ContentEditable
@@ -901,12 +971,18 @@ function EditorInner({
         <HistoryPlugin />
         <CodeHighlightingPlugin />
         <ListPlugin />
+        <TablePlugin hasCellMerge={false} hasCellBackgroundColor={false} />
+        {floatingAnchorElem && (
+          <TableHoverActionsPlugin anchorElem={floatingAnchorElem} />
+        )}
+        <ListTabIndentPlugin />
         <LinkPlugin />
         <AutoLinkPlugin matchers={URL_MATCHERS} />
         <OnChangePlugin
           onChange={(editorState, editorInstance) => {
             if (!onChange) return
             let serialized = ""
+            let markdown = ""
             editorState.read(() => {
               const innerHtml = $generateHtmlFromNodes(editorInstance)
               const parser = new DOMParser()
@@ -924,11 +1000,17 @@ function EditorInner({
               // Strip Lexical's verbose markup (extra <div>, white-space spans,
               // duplicate format wrappers, single-line <p>) before persisting.
               serialized = minimizeContentHtml(doc.body.firstElementChild)
+              // Canonical Markdown projection (color/bg -> normalized <span>).
+              // normalizeMarkdownBlankLines keeps the standard `\n\n` paragraph
+              // separation (Enter = real paragraph break) and only tidies blank-
+              // line runs / the empty-state — no marker characters in the source.
+              markdown = normalizeMarkdownBlankLines($convertToMarkdownString(MARKDOWN_TRANSFORMERS))
             })
-            // No Trix wrapper
-            onChange(serialized)
+            // html: client-side preview/fallback; markdown: canonical storage.
+            onChange({ html: serialized, markdown })
           }}
         />
+        <TrailingParagraphPlugin />
         <InitialContentPlugin html={initialHtml} />
         <LinkAttributesPlugin />
         <ReadyPlugin onReady={onReady} />
@@ -1001,7 +1083,10 @@ export default function InlineLexicalEditor({
         AutoLinkNode,
         ImageNode,
         AttachmentNode,
-        VideoNode
+        VideoNode,
+        TableNode,
+        TableRowNode,
+        TableCellNode
       ],
       onError(error) {
         throw error