diff --git a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/BlocksTab.tsx b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/BlocksTab.tsx index e8a0c0a9..8a3acd5c 100644 --- a/apps/DocFlow/src/app/docs/_components/DocumentSidebar/BlocksTab.tsx +++ b/apps/DocFlow/src/app/docs/_components/DocumentSidebar/BlocksTab.tsx @@ -159,13 +159,6 @@ const BlocksTab = () => { blockType: 'chart', category: 'data', }, - { - icon: 'LayoutDashboard', - label: '多列布局', - description: '创建多列内容布局', - blockType: 'columns', - category: 'layout', - }, { icon: 'Minus', label: '分割线', diff --git a/apps/DocFlow/src/extensions/Document/Document.ts b/apps/DocFlow/src/extensions/Document/Document.ts index 58d8edcb..26089649 100644 --- a/apps/DocFlow/src/extensions/Document/Document.ts +++ b/apps/DocFlow/src/extensions/Document/Document.ts @@ -1,7 +1,7 @@ import { Document as TiptapDocument } from '@tiptap/extension-document'; export const Document = TiptapDocument.extend({ - content: '(block|columns)+', + content: 'block+', }); export default Document; diff --git a/apps/DocFlow/src/extensions/DragHandler/DragHandler.ts b/apps/DocFlow/src/extensions/DragHandler/DragHandler.ts index 253e0059..0a4936e0 100644 --- a/apps/DocFlow/src/extensions/DragHandler/DragHandler.ts +++ b/apps/DocFlow/src/extensions/DragHandler/DragHandler.ts @@ -288,22 +288,6 @@ class ChartBlockStrategy implements BlockContentStrategy { } } -// 增加多列块策略 -class ColumnsBlockStrategy implements BlockContentStrategy { - create() { - return { - type: 'columns', - attrs: { - rows: 2, - }, - content: [ - { type: 'column', content: [{ type: 'paragraph' }] }, - { type: 'column', content: [{ type: 'paragraph' }] }, - ], - }; - } -} - // 增加倒计时组件策略 class CountdownBlockStrategy implements BlockContentStrategy { create() { @@ -345,7 +329,6 @@ class BlockContentStrategyFactory { ['divider', new HorizontalRulerBlockStrategy()], ['ai', new AIBlockStrategy()], ['chart', new ChartBlockStrategy()], - ['columns', new ColumnsBlockStrategy()], ['countdown', new CountdownBlockStrategy()], ]); diff --git a/apps/DocFlow/src/extensions/MultiColumn/Column.ts b/apps/DocFlow/src/extensions/MultiColumn/Column.ts deleted file mode 100644 index 31ae5fd9..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/Column.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { Node, mergeAttributes } from '@tiptap/core'; -import { ReactNodeViewRenderer } from '@tiptap/react'; - -import ColumnComponent from './ColumnComponent'; - -export const Column = Node.create({ - name: 'column', - - content: 'block+', - - isolating: true, - - selectable: true, - - draggable: true, - - addAttributes() { - return { - position: { - default: '', - parseHTML: (element) => element.getAttribute('data-position'), - renderHTML: (attributes) => ({ 'data-position': attributes.position }), - }, - backgroundColor: { - default: '#f3f4f6', - parseHTML: (element) => element.getAttribute('data-background-color') || '#f3f4f6', - renderHTML: (attributes) => { - if (!attributes.backgroundColor) return {}; - - return { 'data-background-color': attributes.backgroundColor }; - }, - }, - }; - }, - - renderHTML({ HTMLAttributes }) { - return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'column' }), 0]; - }, - - parseHTML() { - return [ - { - tag: 'div[data-type="column"]', - }, - ]; - }, - - addNodeView() { - return ReactNodeViewRenderer(ColumnComponent); - }, -}); - -export default Column; diff --git a/apps/DocFlow/src/extensions/MultiColumn/ColumnComponent.tsx b/apps/DocFlow/src/extensions/MultiColumn/ColumnComponent.tsx deleted file mode 100644 index 8025fa9c..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/ColumnComponent.tsx +++ /dev/null @@ -1,361 +0,0 @@ -import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'; -import type { ReactNodeViewProps } from '@tiptap/react'; -import { useState, useRef, useEffect, useCallback } from 'react'; -import { useEditorState } from '@tiptap/react'; -import { v4 as uuid } from 'uuid'; - -import { ColumnLayout } from './Columns'; -import { dragHandlerDirect } from './helpers/dragHandler'; - -import { ColorPicker } from '@/components/panels/Colorpicker/Colorpicker'; -import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; -import { Toolbar } from '@/components/ui/Toolbar'; -import { Icon } from '@/components/ui/Icon'; - -// 默认背景色 -const DEFAULT_BACKGROUND_COLOR = '#f3f4f6'; - -export default function ColumnComponent(props: ReactNodeViewProps) { - const { editor, node, updateAttributes } = props; - const { position, backgroundColor = DEFAULT_BACKGROUND_COLOR } = node.attrs; - - // 状态管理 - const [width, setWidth] = useState('100%'); - const [isResizing, setIsResizing] = useState(false); - const [showColorPicker, setShowColorPicker] = useState(false); - const [currentColor, setCurrentColor] = useState(backgroundColor); - const [showToolbar, setShowToolbar] = useState(false); - const [hideTimeout, setHideTimeout] = useState(null); - const columnKey = uuid(); - - // refs - const columnRef = useRef(null); - const startX = useRef(0); - const startWidth = useRef(0); - - // 获取父节点（columns） - const getParentNode = useCallback(() => { - const pos = props.getPos(); - if (typeof pos !== 'number') return null; - - const resolvedPos = editor.state.doc.resolve(pos); - const parentNode = resolvedPos.parent; - - if (parentNode?.type.name === 'columns') { - return parentNode; - } - - return null; - }, [editor, props]); - - // 获取 columns 的子元素数量 - const getColumnsCount = useCallback(() => { - const parentNode = getParentNode(); - if (!parentNode) return 0; - - return parentNode.childCount; - }, [getParentNode]); - - // 判断是否可以拖拽（子元素数量大于2时允许拖拽） - const isDraggable = useCallback(() => { - const count = getColumnsCount(); - - return count > 2; - }, [getColumnsCount]); - - // 获取父节点位置 - const getParentPosition = useCallback(() => { - const pos = props.getPos(); - if (typeof pos !== 'number') return null; - - const resolvedPos = editor.state.doc.resolve(pos); - - return resolvedPos.before(resolvedPos.depth); - }, [editor, props]); - - // 应用布局变更 - const applyLayout = useCallback( - (layout: ColumnLayout) => { - const parentPos = getParentPosition(); - if (parentPos === null) return; - - editor.chain().focus().setNodeSelection(parentPos).setLayout(layout).run(); - }, - [editor, getParentPosition], - ); - - // 布局切换处理函数 - const onColumnLeft = useCallback(() => { - if (getParentNode()) { - applyLayout(ColumnLayout.SidebarLeft); - } - }, [getParentNode, applyLayout]); - - const onColumnTwo = useCallback(() => { - if (getParentNode()) { - applyLayout(ColumnLayout.TwoColumn); - } - }, [getParentNode, applyLayout]); - - const onColumnRight = useCallback(() => { - if (getParentNode()) { - applyLayout(ColumnLayout.SidebarRight); - } - }, [getParentNode, applyLayout]); - - const insertColumn = useCallback(() => { - // 获取父节点位置 - const parentPos = getParentPosition(); - if (parentPos === null) return; - editor.chain().focus().setNodeSelection(parentPos).run(); - setTimeout(() => { - editor.chain().focus().insertColumn().setColumnClass('add').run(); - }, 50); // 500毫秒延迟 - }, [editor, getParentPosition]); - - // 删除 node - const deleteColumn = useCallback(() => { - const parentPos = getParentPosition(); - if (parentPos === null) return; - props.deleteNode(); - setTimeout(() => { - editor.chain().focus().setNodeSelection(parentPos).run(); - setTimeout(() => { - editor.chain().focus().setColumnClass('reduce').run(); - }, 50); - }, 50); - }, [editor, getParentPosition, props]); - - // 颜色选择器 - const toggleColorPicker = useCallback(() => { - setShowColorPicker((prev) => !prev); - }, []); - - const onColorChange = useCallback( - (color: string) => { - setCurrentColor(color); - updateAttributes({ backgroundColor: color }); - }, - [updateAttributes], - ); - - // 鼠标进入列区域 - const handleMouseEnter = useCallback(() => { - if (hideTimeout) { - clearTimeout(hideTimeout); - setHideTimeout(null); - } - - setShowToolbar(true); - }, [hideTimeout]); - - // 鼠标离开列区域 - const handleMouseLeave = useCallback(() => { - // 延迟隐藏，给鼠标移动到工具栏的时间 - const timeout = setTimeout(() => { - setShowToolbar(false); - }, 500); // 500ms延迟隐藏 - setHideTimeout(timeout); - }, []); - - // 鼠标进入工具栏 - const handleToolbarEnter = useCallback(() => { - if (hideTimeout) { - clearTimeout(hideTimeout); - setHideTimeout(null); - } - - // 确保工具栏保持显示 - setShowToolbar(true); - }, [hideTimeout]); - - // 鼠标离开工具栏 - const handleToolbarLeave = useCallback(() => { - // 延迟隐藏 - const timeout = setTimeout(() => { - setShowToolbar(false); - }, 500); // 500ms延迟隐藏 - setHideTimeout(timeout); - }, []); - - // 拖拽开始处理 - const handleDragStart = useCallback( - (e: React.DragEvent) => { - if (!editor) return; - - // 检查是否允许拖拽（子元素数量大于2时不允许拖拽） - if (!isDraggable()) { - e.preventDefault(); - - return; - } - - const element = columnRef.current; // 直接获取 DOM 元素 - const pos = props.getPos(); // 直接获取位置 - - if (typeof pos !== 'number') return; - - // 保存拖拽前的columns状态 - const resolvedPos = editor.state.doc.resolve(pos); - const parentNode = resolvedPos.parent; - const parentAttrs = parentNode.attrs; - - dragStartStateRef.current = { - parentPos: resolvedPos.before(resolvedPos.depth), - parentAttrs: { ...parentAttrs }, - }; - - if (element && pos !== null && pos !== undefined) { - dragHandlerDirect(e.nativeEvent, editor, element, pos); - } - }, - [editor, columnRef.current, isDraggable], - ); - - // 保存拖拽前的columns状态 - const dragStartStateRef = useRef<{ - parentPos: number; - parentAttrs: any; - } | null>(null); - - // 调整大小处理 - const handleMouseDown = useCallback((e: React.MouseEvent) => { - e.preventDefault(); - setIsResizing(true); - startX.current = e.clientX; - setShowToolbar(true); - startWidth.current = columnRef.current?.offsetWidth || 0; - }, []); - - // 调整大小的副作用 - useEffect(() => { - if (!isResizing) return; - - const handleMouseMove = (e: MouseEvent) => { - const diff = e.clientX - startX.current; - const newWidth = `${startWidth.current + diff}px`; - - setWidth(newWidth); - - if (editor) { - editor.commands.updateAttributes('column', { width: newWidth }); - } - }; - - const handleMouseUp = () => { - setIsResizing(false); - }; - - document.addEventListener('mousemove', handleMouseMove); - document.addEventListener('mouseup', handleMouseUp); - - return () => { - document.removeEventListener('mousemove', handleMouseMove); - document.removeEventListener('mouseup', handleMouseUp); - }; - }, [isResizing, editor]); - - // 布局状态 - const { isColumnLeft, isColumnRight, isColumnTwo } = useEditorState({ - editor, - selector: (ctx) => ({ - isColumnLeft: ctx.editor.isActive('columns', { layout: ColumnLayout.SidebarLeft }), - isColumnRight: ctx.editor.isActive('columns', { layout: ColumnLayout.SidebarRight }), - isColumnTwo: ctx.editor.isActive('columns', { layout: ColumnLayout.TwoColumn }), - }), - }); - - return ( - -
- - {/* 右侧边框拖拽区域 */} -
- {showToolbar && ( - - - - - - - - - {/* 布局切换按钮组：默认隐藏，可按需开启 */} - - - - - - - - - - {/* 增加一个插入按钮 */} - - - - {/* 增加一个删除按钮 小于等于2的时候不允许删除*/} - {isDraggable() && ( - - - - )} - -
- - {showColorPicker && ( -
- onColorChange(DEFAULT_BACKGROUND_COLOR)} - /> -
- )} - - - - )} -
-
- - ); -} diff --git a/apps/DocFlow/src/extensions/MultiColumn/Columns.ts b/apps/DocFlow/src/extensions/MultiColumn/Columns.ts deleted file mode 100644 index 49782c1a..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/Columns.ts +++ /dev/null @@ -1,156 +0,0 @@ -import { Node } from '@tiptap/core'; - -export enum ColumnLayout { - SidebarLeft = 'sidebar-left', - SidebarRight = 'sidebar-right', - TwoColumn = 'two-column', -} - -declare module '@tiptap/core' { - interface Commands { - columns: { - setColumns: (rows: number) => ReturnType; - setLayout: (layout: ColumnLayout) => ReturnType; - insertColumn: () => ReturnType; - setColumnClass: (handle: string) => ReturnType; - }; - } -} - -export const Columns = Node.create({ - name: 'columns', - - group: 'columns', - - content: 'column+', - - defining: true, - - isolating: true, - - addAttributes() { - return { - layout: { - default: ColumnLayout.TwoColumn, - }, - rows: { - default: 1, - }, - }; - }, - - addCommands() { - return { - setColumns: - (rowNum: number = 1) => - ({ commands }) => { - // 根据 rows 参数动态创建对应数量的列 - const columns = []; - - for (let i = 0; i < rowNum; i++) { - columns.push(`

`); - } - - return commands.insertContent( - `
${columns.join('')}
`, - ); - }, - setLayout: - (layout: ColumnLayout) => - ({ commands }) => - commands.updateAttributes('columns', { layout }), - // 在当前选中的 columns 节点中增加一个新列 - insertColumn: - () => - ({ commands, view }) => { - if (!view?.state?.selection) { - return false; - } - - try { - const { state } = view; - const { selection } = state; - const { $from } = selection; - - // 查找 columns 节点 - 简化查找逻辑 - let columnsPos = -1; - let columnsNode = null; - - // 方法1: 直接从当前位置向上查找父节点（更高效） - for (let depth = $from.depth; depth > 0; depth--) { - const node = $from.node(depth); - - if (node?.type?.name === 'columns') { - columnsPos = $from.before(depth); - columnsNode = node; - break; - } - } - - // 方法2: 如果方法1未找到，使用 nodesBetween 查找 - if (columnsPos < 0) { - state.doc.nodesBetween(selection.from, selection.to, (node, pos) => { - if (node.type.name === 'columns') { - columnsPos = pos; - columnsNode = node; - - return false; // 停止遍历 - } - - return true; // 继续遍历 - }); - } - - // 如果找到了 columns 节点，执行插入操作 - if (columnsPos >= 0 && columnsNode) { - // 计算插入位置和创建新列 - const endPos = columnsPos + columnsNode.nodeSize - 1; - const columnPosition = `column-${columnsNode.childCount + 1}`; - const newColumnHtml = `

`; - - return commands.insertContentAt(endPos, newColumnHtml); - } - - return false; - } catch (error) { - console.error('Error inserting column:', error); - - return false; - } - }, - setColumnClass: - (handle) => - ({ commands, editor }) => { - const attributes = editor.getAttributes('columns'); - - // 当前 columns 有多少子节点 - return commands.updateAttributes('columns', { - rows: handle === 'add' ? attributes.rows + 1 : attributes.rows - 1, - }); - }, - }; - }, - - renderHTML({ HTMLAttributes }) { - return [ - 'div', - { - ...HTMLAttributes, - 'data-type': 'columns', - class: `layout-${HTMLAttributes.layout}`, - style: `grid-template-columns: repeat(${HTMLAttributes.rows}, 1fr)`, - }, - 0, - ]; - }, - - parseHTML() { - return [ - { - tag: 'div[data-type="columns"]', - }, - ]; - }, -}); - -export default Columns; diff --git a/apps/DocFlow/src/extensions/MultiColumn/helpers/cloneElement.ts b/apps/DocFlow/src/extensions/MultiColumn/helpers/cloneElement.ts deleted file mode 100644 index d038f4b2..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/helpers/cloneElement.ts +++ /dev/null @@ -1,25 +0,0 @@ -function getCSSText(element: Element) { - let value = ''; - const style = getComputedStyle(element); - - for (let i = 0; i < style.length; i += 1) { - value += `${style[i]}:${style.getPropertyValue(style[i])};`; - } - - return value; -} - -export function cloneElement(node: HTMLElement) { - const clonedNode = node.cloneNode(true) as HTMLElement; - const sourceElements = [node, ...Array.from(node.getElementsByTagName('*'))] as HTMLElement[]; - const targetElements = [ - clonedNode, - ...Array.from(clonedNode.getElementsByTagName('*')), - ] as HTMLElement[]; - - sourceElements.forEach((sourceElement, index) => { - targetElements[index].style.cssText = getCSSText(sourceElement); - }); - - return clonedNode; -} diff --git a/apps/DocFlow/src/extensions/MultiColumn/helpers/dragHandler.ts b/apps/DocFlow/src/extensions/MultiColumn/helpers/dragHandler.ts deleted file mode 100644 index fc5dcf4c..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/helpers/dragHandler.ts +++ /dev/null @@ -1,111 +0,0 @@ -import type { Editor } from '@tiptap/core'; -import { NodeSelection } from '@tiptap/pm/state'; -// import { v4 as uuid } from 'uuid'; - -import { cloneElement } from './cloneElement'; -import { removeNode } from './removeNode'; - -export function dragHandlerDirect( - event: DragEvent, - editor: Editor, - element: HTMLElement, - pos: number, - // uuid?: string, -) { - const { view } = editor; - - if (!event.dataTransfer) { - return; - } - - try { - const $pos = view.state.doc.resolve(pos); - let targetNode = null; - let targetFrom = pos; - - // 确定目标节点和起始位置 - // 首先检查当前位置是否在column节点内部 - if ($pos.parent?.type.name === 'column' && $pos.depth > 0) { - // 在column节点内部，向上查找column节点 - for (let depth = $pos.depth; depth > 0; depth--) { - const node = $pos.node(depth); - - if (node?.type?.name === 'column') { - targetNode = node; - targetFrom = $pos.before(depth); - break; - } - } - } else if ($pos.nodeAfter?.type.name === 'column') { - // pos 指向 column 节点的开始位置 - targetNode = $pos.nodeAfter; - targetFrom = pos; - } else if ($pos.nodeBefore?.type.name === 'column') { - // pos 指向 column 节点的结束位置 - targetNode = $pos.nodeBefore; - targetFrom = pos - targetNode.nodeSize; - } else { - return; - } - - if (!targetNode || targetNode.type.name !== 'column') { - return; - } - - // 计算节点范围并获取内容 - const from = targetFrom; - const to = from + targetNode.nodeSize; - const slice = view.state.doc.slice(from, to); - - if (slice.content.childCount === 0) { - return; - } - - // 创建拖拽元素 - const { tr } = view.state; - - const wrapper = document.createElement('div'); - const clonedElement = cloneElement(element); - wrapper.append(clonedElement); - - wrapper.style.position = 'absolute'; - wrapper.style.top = '-10000px'; - document.body.append(wrapper); - - event.dataTransfer.clearData(); - event.dataTransfer.setDragImage(wrapper, 0, 0); - - // tell ProseMirror the dragged content - view.dragging = { slice, move: true }; - - const selection = NodeSelection.create(view.state.doc, from); - tr.setSelection(selection); - view.dispatch(tr); - - // 获取多有的columns - - // 获取所有的columns节点 - const getAllColumns = () => { - // const columnsNodes: Array<{ node: any; pos: number; uuid?: string }> = []; - const { tr } = view.state; - view.state.doc.descendants((node, pos) => { - if (node.type.name === 'columns') { - tr.setNodeAttribute(pos, 'rows', node.childCount); - } - }); - view.dispatch(tr); - }; - - // clean up and handle drag end callback - const handleDrop = () => { - removeNode(wrapper); - setTimeout(() => { - getAllColumns(); - }, 50); - }; - - document.addEventListener('drop', handleDrop, { once: true }); - } catch (error) { - console.error('Error in dragHandlerDirect:', error); - } -} diff --git a/apps/DocFlow/src/extensions/MultiColumn/helpers/removeNode.ts b/apps/DocFlow/src/extensions/MultiColumn/helpers/removeNode.ts deleted file mode 100644 index 847d0580..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/helpers/removeNode.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function removeNode(node: HTMLElement) { - node.parentNode?.removeChild(node); -} diff --git a/apps/DocFlow/src/extensions/MultiColumn/index.ts b/apps/DocFlow/src/extensions/MultiColumn/index.ts deleted file mode 100644 index aadb9d88..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Columns'; -export * from './Column'; diff --git a/apps/DocFlow/src/extensions/MultiColumn/menus/ColumnsMenu.tsx b/apps/DocFlow/src/extensions/MultiColumn/menus/ColumnsMenu.tsx deleted file mode 100644 index 0e6c738b..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/menus/ColumnsMenu.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import { useEditorState } from '@tiptap/react'; -import { v4 as uuid } from 'uuid'; -import { useEffect, useState } from 'react'; - -import { ColumnLayout } from '../Columns'; - -import { MenuProps } from '@/components/menus/types'; -import { getRenderContainer } from '@/utils'; -import { Toolbar } from '@/components/ui/Toolbar'; -import { Icon } from '@/components/ui/Icon'; -import { BubbleMenu } from '@/components/ui/BubbleMenu'; -import { ColorPicker } from '@/components/panels/Colorpicker/Colorpicker'; - -export function ColumnsMenu({ editor }: MenuProps) { - const [showColorPicker, setShowColorPicker] = useState(false); - const [currentColor, setCurrentColor] = useState('#f3f4f6'); // 默认背景色 - - // 查找父节点，直到找到 column 类型的节点 - const findColumnParent = (selection: any) => { - const { $head } = selection; - - // 从当前位置向上遍历所有父节点 - for (let depth = $head.depth; depth >= 0; depth--) { - const node = $head.node(depth); - - // 如果找到 column 类型的节点，停止查找 - if (node.type.name === 'column') { - return { - node: node, - depth: depth, - pos: $head.start(depth) - 1, - }; - } - } - - return null; // 没有找到 column 节点 - }; - - useEffect(() => { - const columnParent = findColumnParent(editor.state.selection); - - if (columnParent) { - setCurrentColor(columnParent.node.attrs.backgroundColor || '#f3f4f6'); - } - }, [editor.state.selection]); - - const getReferenceClientRect = () => { - const renderContainer = getRenderContainer(editor, 'column'); - const rect = renderContainer?.getBoundingClientRect() || new DOMRect(-1000, -1000, 0, 0); - - return rect; - }; - - const shouldShow = () => { - const isColumn = editor.isActive('column'); - - return isColumn; - }; - - const onColumnLeft = () => { - editor.chain().focus().setLayout(ColumnLayout.SidebarLeft).run(); - }; - - const onColumnRight = () => { - editor.chain().focus().setLayout(ColumnLayout.SidebarRight).run(); - }; - - const onColumnTwo = () => { - editor.chain().focus().setLayout(ColumnLayout.TwoColumn).run(); - }; - - const onColorChange = (color: string) => { - setCurrentColor(color); - // 是渲染导致的更新，所以需要设置isUpdatAttribute为true - // setIsUpdatAttribute(true); - editor - .chain() - .focus() - .updateAttributes('column', { - backgroundColor: color, - // 其他属性... - }) - .run(); - }; - - const toggleColorPicker = () => { - setShowColorPicker(!showColorPicker); - }; - - const { isColumnLeft, isColumnRight, isColumnTwo } = useEditorState({ - editor, - selector: (ctx) => { - return { - isColumnLeft: ctx.editor.isActive('columns', { layout: ColumnLayout.SidebarLeft }), - isColumnRight: ctx.editor.isActive('columns', { layout: ColumnLayout.SidebarRight }), - isColumnTwo: ctx.editor.isActive('columns', { layout: ColumnLayout.TwoColumn }), - }; - }, - }); - - return ( - { - // if (!isUpdatAttribute) { - // setIsUpdatAttribute(false); - // } - // }} - > - - - - - - - - - - - -
- - {showColorPicker && ( -
- onColorChange('#f3f4f6')} - /> -
- )} - - - ); -} - -export default ColumnsMenu; diff --git a/apps/DocFlow/src/extensions/MultiColumn/menus/index.ts b/apps/DocFlow/src/extensions/MultiColumn/menus/index.ts deleted file mode 100644 index c39d51ba..00000000 --- a/apps/DocFlow/src/extensions/MultiColumn/menus/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ColumnsMenu'; diff --git a/apps/DocFlow/src/extensions/SlashCommand/SlashCommand.ts b/apps/DocFlow/src/extensions/SlashCommand/SlashCommand.ts index bab36376..f2893e9a 100644 --- a/apps/DocFlow/src/extensions/SlashCommand/SlashCommand.ts +++ b/apps/DocFlow/src/extensions/SlashCommand/SlashCommand.ts @@ -26,19 +26,13 @@ export const SlashCommand = Extension.create({ const isRootDepth = $from.depth === 1; const isParagraph = $from.parent.type.name === 'paragraph'; const isStartOfNode = $from.parent.textContent?.charAt(0) === '/'; - // TODO - const isInColumn = this.editor.isActive('column'); const afterContent = $from.parent.textContent?.substring( $from.parent.textContent?.indexOf('/'), ); const isValidAfterContent = !afterContent?.endsWith(' '); - return ( - ((isRootDepth && isParagraph && isStartOfNode) || - (isInColumn && isParagraph && isStartOfNode)) && - isValidAfterContent - ); + return isRootDepth && isParagraph && isStartOfNode && isValidAfterContent; }, command: ({ editor, props }: { editor: Editor; props: any }) => { const { view, state } = editor; diff --git a/apps/DocFlow/src/extensions/SlashCommand/groups.ts b/apps/DocFlow/src/extensions/SlashCommand/groups.ts index c5cad9c6..1af88f20 100644 --- a/apps/DocFlow/src/extensions/SlashCommand/groups.ts +++ b/apps/DocFlow/src/extensions/SlashCommand/groups.ts @@ -119,7 +119,6 @@ export const GROUPS: Group[] = [ label: 'Code Block', iconName: 'SquareCode', description: 'Code block with syntax highlighting', - shouldBeHidden: (editor) => editor.isActive('columns'), action: (editor) => { editor.chain().focus().toggleCodeBlock().run(); }, @@ -135,7 +134,6 @@ export const GROUPS: Group[] = [ label: 'Table', iconName: 'Table', description: 'Insert a table', - shouldBeHidden: (editor) => editor.isActive('columns'), action: (editor) => { editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).run(); }, @@ -160,23 +158,6 @@ export const GROUPS: Group[] = [ editor.chain().focus().setImageUpload().run(); }, }, - { - name: 'columns', - label: 'Columns', - iconName: 'Columns2', - description: 'Add two column content', - aliases: ['cols'], - shouldBeHidden: (editor) => editor.isActive('columns'), - action: (editor) => { - editor - .chain() - .focus() - .setColumns(2) - .updateAttributes('columns', { rows: 2 }) - .focus(editor.state.selection.head - 1) - .run(); - }, - }, { name: 'horizontalRule', label: 'Horizontal Rule', @@ -193,7 +174,6 @@ export const GROUPS: Group[] = [ iconName: 'Book', aliases: ['outline'], description: 'Insert a table of contents', - shouldBeHidden: (editor) => editor.isActive('columns'), action: (editor) => { editor.chain().focus().insertTableOfContents().run(); }, diff --git a/apps/DocFlow/src/extensions/extension-kit.ts b/apps/DocFlow/src/extensions/extension-kit.ts index 5a54384c..c3493459 100644 --- a/apps/DocFlow/src/extensions/extension-kit.ts +++ b/apps/DocFlow/src/extensions/extension-kit.ts @@ -48,8 +48,6 @@ import { Typography, Underline, emojiSuggestion, - Columns, - Column, TaskItem, TaskList, UniqueID, @@ -82,12 +80,10 @@ export const ExtensionKit = ({ provider }: ExtensionKitProps) => [ Paragraph, Text, // Image, - Columns, TaskList, TaskItem.configure({ nested: true, }), - Column, Selection, Heading.configure({ levels: [1, 2, 3, 4, 5, 6], diff --git a/apps/DocFlow/src/extensions/index.ts b/apps/DocFlow/src/extensions/index.ts index 3e3c1f17..79be377b 100644 --- a/apps/DocFlow/src/extensions/index.ts +++ b/apps/DocFlow/src/extensions/index.ts @@ -47,7 +47,6 @@ export { Image } from './Image'; export { ImageUpload } from './ImageUpload'; export { ImageBlock } from './ImageBlock'; export { TableImage } from './TableImage'; -export { Columns, Column } from './MultiColumn'; export { emojiSuggestion } from './EmojiSuggestion'; export { DraggableBlock } from './DraggableBlock'; export { DragHandler } from './DragHandler'; diff --git a/apps/DocFlow/src/styles/partials/blocks.css b/apps/DocFlow/src/styles/partials/blocks.css index 833b9309..9c63e48c 100644 --- a/apps/DocFlow/src/styles/partials/blocks.css +++ b/apps/DocFlow/src/styles/partials/blocks.css @@ -21,43 +21,6 @@ @apply first:mt-0 last:mb-0; } - /* Columns */ - .ProseMirror [data-type='columns'] { - @apply grid gap-4 mt-14 mb-12; - overflow: hidden; - max-width: 100%; - width: 100%; - } - - .ProseMirror [data-type='columns'].layout-sidebar-left { - grid-template-columns: 30fr 70fr; - } - - .ProseMirror [data-type='columns'].layout-sidebar-right { - grid-template-columns: 70fr 30fr; - } - - .ProseMirror [data-type='columns'].layout-two-column { - grid-template-columns: 1fr 1fr; - } - - .ProseMirror [data-type='column'] { - @apply overflow-hidden min-w-0; - word-wrap: break-word; - overflow-wrap: break-word; - width: 100%; - box-sizing: border-box; - } - - .ProseMirror [data-type='column'] > * { - @apply max-w-full; - box-sizing: border-box; - } - - .ProseMirror [data-type='column'] .ProseMirror { - overflow-x: hidden !important; - } - /* Details Block */ .ProseMirror [data-type='details'] { @apply flex gap-1 my-6 mx-auto p-2 border border-gray-300 rounded; diff --git a/apps/DocFlow/src/styles/partials/placeholder.css b/apps/DocFlow/src/styles/partials/placeholder.css index f20973ed..6009aafb 100644 --- a/apps/DocFlow/src/styles/partials/placeholder.css +++ b/apps/DocFlow/src/styles/partials/placeholder.css @@ -11,10 +11,6 @@ content: 'Type / to browse options'; } - .ProseMirror.ProseMirror-focused > [data-type='columns'] > [data-type='column'] > p.is-empty.has-focus::before { - content: 'Type / to browse options'; - } - .ProseMirror > .is-editor-empty:first-child:last-child::before { content: 'Click here to start writing …'; }