From edd0fc98dbf7d4e8e2810fa0df8c6f68c3678968 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Thu, 16 Apr 2026 11:23:10 +0530 Subject: [PATCH] feat: Table support in article editor (#13974) --- .../Pages/ArticleEditorPage/ArticleEditor.vue | 15 ++++--- .../widgets/WootWriter/FullEditor.vue | 3 +- app/javascript/dashboard/constants/editor.js | 1 + .../api/v1/portals/articles/show.html.erb | 39 ++++++++++++++++++- lib/custom_markdown_renderer.rb | 6 +++ package.json | 2 +- pnpm-lock.yaml | 10 ++--- 7 files changed, 60 insertions(+), 16 deletions(-) diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue index 2f06ea01e..22cb1441a 100644 --- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue +++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue @@ -161,8 +161,12 @@ const handleCreateArticle = event => { } .editor-root .has-selection { + .ProseMirror-menubar:not(:has(*)) { + display: none !important; + } + .ProseMirror-menubar { - @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak; + @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak; display: flex; top: var(--selection-top, auto) !important; left: var(--selection-left, 0) !important; @@ -170,15 +174,10 @@ const handleCreateArticle = event => { position: absolute !important; .ProseMirror-menuitem { - @apply mr-0; + @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center; .ProseMirror-icon { - @apply p-0 mt-0 !mr-0; - - svg { - width: 20px !important; - height: 20px !important; - } + @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2; } } diff --git a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue index 976ed3270..64f6136c2 100644 --- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue +++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue @@ -262,7 +262,8 @@ export default { // Get the editor's width const editorWidth = editor.offsetWidth; - const menubarWidth = 480; // Menubar width (adjust as needed (px)) + const menubar = editor.querySelector('.ProseMirror-menubar'); + const menubarWidth = menubar ? menubar.scrollWidth : 480; // Get the end position of the selection const { bottom: endBottom, right: endRight } = editorView.coordsAtPos(to); diff --git a/app/javascript/dashboard/constants/editor.js b/app/javascript/dashboard/constants/editor.js index d33af1a11..3969f43a7 100644 --- a/app/javascript/dashboard/constants/editor.js +++ b/app/javascript/dashboard/constants/editor.js @@ -182,6 +182,7 @@ export const ARTICLE_EDITOR_MENU_OPTIONS = [ 'h3', 'imageUpload', 'code', + 'insertTable', ]; /** diff --git a/app/views/public/api/v1/portals/articles/show.html.erb b/app/views/public/api/v1/portals/articles/show.html.erb index 5ca116f89..784817c9c 100644 --- a/app/views/public/api/v1/portals/articles/show.html.erb +++ b/app/views/public/api/v1/portals/articles/show.html.erb @@ -36,7 +36,7 @@ <% end %>
-
+
<%= @parsed_content %>
@@ -45,4 +45,41 @@ .article-content li > p { margin: 0; } + .article-content .tableWrapper { + overflow-x: auto; + margin-bottom: 1rem; + } + .article-content table { + min-width: 100%; + border: 1px solid; + border-radius: 8px; + border-spacing: 0; + border-collapse: separate; + margin: 0; + } + .article-content th, + .article-content td { + border-bottom: 1px solid; + border-inline-end: 1px solid; + border-color: inherit; + padding: 0.5rem 0.75rem; + text-align: start; + vertical-align: top; + } + .article-content th:last-child, + .article-content td:last-child { + border-inline-end: none; + } + .article-content th { + font-weight: 600; + } + .article-content th:first-child { + border-start-start-radius: 7px; + } + .article-content th:last-child { + border-start-end-radius: 7px; + } + .article-content tr:last-child td { + border-bottom: none; + } diff --git a/lib/custom_markdown_renderer.rb b/lib/custom_markdown_renderer.rb index fea10388c..e7eefe5c8 100644 --- a/lib/custom_markdown_renderer.rb +++ b/lib/custom_markdown_renderer.rb @@ -9,6 +9,12 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer @embed_regexes ||= config.transform_values { |embed_config| Regexp.new(embed_config['regex']) } end + def table(node) + out('
') + super + out('
') + end + def text(node) content = node.string_content diff --git a/package.json b/package.json index c8e511be2..63ccc39f9 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@amplitude/analytics-browser": "^2.11.10", "@breezystack/lamejs": "^1.2.7", "@chatwoot/ninja-keys": "1.2.3", - "@chatwoot/prosemirror-schema": "1.3.9", + "@chatwoot/prosemirror-schema": "1.3.10", "@chatwoot/utils": "^0.0.52", "@formkit/core": "^1.7.2", "@formkit/vue": "^1.7.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 818698372..19f9f04b9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,8 +26,8 @@ importers: specifier: 1.2.3 version: 1.2.3 '@chatwoot/prosemirror-schema': - specifier: 1.3.9 - version: 1.3.9 + specifier: 1.3.10 + version: 1.3.10 '@chatwoot/utils': specifier: ^0.0.52 version: 0.0.52 @@ -454,8 +454,8 @@ packages: '@chatwoot/ninja-keys@1.2.3': resolution: {integrity: sha512-xM8d9P5ikDMZm2WbaCTk/TW5HFauylrU3cJ75fq5je6ixKwyhl/0kZbVN/vbbZN4+AUX/OaSIn6IJbtCgIF67g==} - '@chatwoot/prosemirror-schema@1.3.9': - resolution: {integrity: sha512-nbzvW4Rfe7EC+tHF/wWJK5pIxRzfQj/DDAtZI7pwM9uJfv9yQz6bAUCA7kz7Vq1NF29XOisZaT5W0005ygk1pg==} + '@chatwoot/prosemirror-schema@1.3.10': + resolution: {integrity: sha512-MtOXqFPHptFHu/AoIPhQ9TskVXOxOXCgBY/tgAtCAQRut978F7I3QxozQBECBz83ubsoXnBecpNjGNq0OPgONw==} '@chatwoot/utils@0.0.52': resolution: {integrity: sha512-e57uVqyVW4tj1gql4YJPNMykqMJPkETn5Y9AmHdhc6Y7oxDXfRXBq27fZrrDadLkZdn5RYVCZjfIhXOumyYv2Q==} @@ -4967,7 +4967,7 @@ snapshots: hotkeys-js: 3.8.7 lit: 2.2.6 - '@chatwoot/prosemirror-schema@1.3.9': + '@chatwoot/prosemirror-schema@1.3.10': dependencies: markdown-it-sup: 2.0.0 prosemirror-commands: 1.6.0