WIP

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -20,6 +20,7 @@ import {
   IconCalendar,
   IconAppWindow,
   IconSitemap,
+  IconLayoutColumns,
 } from "@tabler/icons-react";
 import {
   CommandProps,
@@ -243,6 +244,51 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
           .run(),
     },
+    {
+      title: "Columns",
+      description: "Insert 2 columns layout.",
+      searchTerms: ["columns", "layout", "grid", "side by side"],
+      icon: IconLayoutColumns,
+      command: ({ editor, range }: CommandProps) => {
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertContent({
+            type: "column_container",
+            content: [
+              {
+                type: "column",
+                attrs: { colWidth: 200 },
+                content: [
+                  {
+                    type: "paragraph",
+                  },
+                ],
+              },
+              {
+                type: "column",
+                attrs: { colWidth: 200 },
+                content: [
+                  {
+                    type: "paragraph",
+                  },
+                ],
+              },
+              {
+                type: "column",
+                attrs: { colWidth: 200 },
+                content: [
+                  {
+                    type: "paragraph",
+                  },
+                ],
+              },
+            ],
+          })
+          .run();
+      },
+    },
     {
       title: "Toggle block",
       description: "Insert collapsible block.",

apps/client/src/features/editor/extensions/extensions.ts

@@ -46,6 +46,7 @@ import {
   Heading,
   Highlight,
   UniqueID,
+  ColumnsExtension,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -229,6 +230,7 @@ export const mainExtensions = [
   Subpages.configure({
     view: SubpagesView,
   }),
+  ColumnsExtension,
   MarkdownClipboard.configure({
     transformPastedText: true,
   }),

apps/client/src/features/editor/styles/column.css

@@ -0,0 +1,123 @@
+.resize-cursor {
+    cursor: col-resize;
+}
+
+.prosemirror-column-container {
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 8px);
+    gap: 12px;
+    margin: 16px 0;
+}
+
+.prosemirror-column-container.has-focus .prosemirror-column,
+.prosemirror-column-container:hover .prosemirror-column {
+    background-color: rgba(100, 106, 115, 0.05);
+}
+
+.prosemirror-column-container .prosemirror-column {
+    position: relative;
+    border-radius: 8px;
+    min-width: 50px;
+    padding: 12px;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+}
+
+.prosemirror-column-container
+.prosemirror-column
+> :not(div.grid-resize-handle):nth-child(1),
+.prosemirror-column-container
+.prosemirror-column
+> div.grid-resize-handle
++ :nth-child(2) {
+    margin-top: 0;
+}
+
+.prosemirror-column-container .prosemirror-column > :nth-last-child(1) {
+    margin-bottom: 0;
+}
+
+.prosemirror-column-container .prosemirror-column .grid-resize-handle {
+    position: absolute;
+    right: -7px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    z-index: 20;
+    background-color: #336df4;
+    pointer-events: none;
+}
+
+.prosemirror-column-container
+.prosemirror-column
+.grid-resize-handle
+.circle-button {
+    top: -8px;
+    left: -9px;
+    width: 12px;
+    height: 12px;
+    background-color: #007bff;
+    border: 4px solid white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    pointer-events: auto;
+    cursor: pointer;
+    transition: transform 0.1s ease-in-out;
+}
+
+.prosemirror-column-container
+.prosemirror-column
+.grid-resize-handle
+.circle-button:hover {
+    transform: scale(1.35);
+}
+
+.prosemirror-column-container
+.prosemirror-column
+.grid-resize-handle
+.circle-button
+.plus {
+    position: relative;
+    width: 8px;
+    height: 8px;
+}
+
+.prosemirror-column-container
+.prosemirror-column
+.grid-resize-handle
+.circle-button
+.plus::before,
+.prosemirror-column-container
+.prosemirror-column
+.grid-resize-handle
+.circle-button
+.plus::after {
+    content: '';
+    position: absolute;
+    background-color: white;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.prosemirror-column-container
+.prosemirror-column
+.grid-resize-handle
+.circle-button
+.plus::before {
+    width: 8px;
+    height: 2px;
+}
+
+.prosemirror-column-container
+.prosemirror-column
+.grid-resize-handle
+.circle-button
+.plus::after {
+    width: 24px;
+    height: 8px;
+}

apps/client/src/features/editor/styles/index.css

@@ -13,3 +13,4 @@
 @import "./mention.css";
 @import "./ordered-list.css";
 @import "./highlight.css";
+@import "./column.css";

apps/server/src/collaboration/collaboration.util.ts

@@ -35,6 +35,7 @@ import {
   Subpages,
   Highlight,
   UniqueID,
+  ColumnsExtension,
   addUniqueIdsToDoc,
 } from '@docmost/editor-ext';
 import { generateText, getSchema, JSONContent } from '@tiptap/core';
@@ -88,6 +89,7 @@ export const tiptapExtensions = [
   Embed,
   Mention,
   Subpages,
+  ColumnsExtension
 ] as any;
 
 export function jsonToHtml(tiptapJson: any) {