F/layout plugin

packages/common/src/components/Icons.tsx

@@ -119,6 +119,18 @@ export const FontColorIcon = () => (
   </svg>
 )
 
+export const TrashIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.2em"
+    height="1.2em"
+    viewBox="0 0 24 24"
+    fill="#000000">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+  </svg>
+)
+
 export const H1Icon = () => (
   <svg
     width="1em"

packages/common/src/components/index.ts

@@ -2,6 +2,10 @@ export * from './modal'
 
 export * from './color-picker'
 
+export * from './Divider'
+
+export * from './inline-dialog'
+
 export * from './Icons'
 
 export * from './SubMenuIcon'

packages/common/src/components/inline-dialog/index.tsx

@@ -0,0 +1,40 @@
+import React, {HTMLAttributes, forwardRef} from 'react'
+
+type Props = {
+  /** Without using a 3rd-party position lib, like popper, you can place the
+   * dialog within a relatively positioned element to center it. This can be
+   * beneficial for simple scenarios and performance. */
+  isRelative?: boolean
+} & HTMLAttributes<HTMLDivElement>
+
+const InlineDialog = forwardRef<HTMLDivElement, Props>(({isRelative, ...props}: any, ref) => {
+  const relativeStyles = isRelative
+    ? {
+        left: '50%',
+        margin: 10,
+        transform: 'translateX(-50%)'
+      }
+    : {}
+
+  return (
+    <div
+      ref={ref}
+      contentEditable={false}
+      style={{
+        backgroundColor: 'white',
+        borderRadius: 10,
+        boxShadow: `rgba(9, 30, 66, 0.31) 0px 0px 1px, rgba(9, 30, 66, 0.25) 0px 4px 8px -2px`,
+        padding: 10,
+        position: 'absolute',
+        userSelect: 'none',
+        zIndex: 1,
+        ...relativeStyles
+      }}
+      {...props}
+    />
+  )
+})
+
+export default InlineDialog
+
+export {InlineDialog}

packages/core/package.json

@@ -85,6 +85,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
+    "@dreifuss-wysiwyg-editor/layout": "0.0.0",
+    "@dreifuss-wysiwyg-editor/layout-ui": "0.0.0",
     "@dreifuss-wysiwyg-editor/common": "^1.0.2-alpha.1",
     "@dreifuss-wysiwyg-editor/link": "^1.0.2-alpha.1",
     "@dreifuss-wysiwyg-editor/link-ui": "^1.0.2-alpha.1",

packages/core/src/DreifussWysiwygEditor.tsx

@@ -1,5 +1,4 @@
 import React, {ReactNode} from 'react'
-import Divider, {DividerType} from './atoms/Divider'
 import {HeadingToolbar} from '@udecode/plate-toolbar'
 import {ELEMENT_MEDIA_EMBED} from '@udecode/plate-media-embed'
 import {createPlateOptions} from './utils/createPlateOptions'
@@ -11,7 +10,9 @@ import {
   MediaEmbedIcon,
   EmojiPicker,
   EmojiIcon,
-  EditorValue
+  EditorValue,
+  Divider,
+  DividerType
 } from '@dreifuss-wysiwyg-editor/common'
 import {createPlateComponents} from './utils/createPlateComponents'
 import {CharCountToolbar} from '@dreifuss-wysiwyg-editor/character-count-ui'
@@ -56,6 +57,7 @@ export interface Toolbars {
 }
 
 export interface EnablePluginsProps {
+  layout?: boolean
   dnd?: boolean
   search?: boolean
   list?: boolean

packages/core/src/DreifussWysiwygEditorDemo.tsx

@@ -4,27 +4,58 @@ import {DreifussWysiwygEditor} from './index'
 import {CustomImageToolbarProps} from '@dreifuss-wysiwyg-editor/image-ui'
 
 const value: any = [
-  {type: 'action_item', checked: true, children: [{text: 'Slide to the right.'}], id: 10054},
-  {type: 'action_item', children: [{text: 'Criss-cross.'}], id: 10055},
   {
-    type: 'paragraph',
-    children: [{type: 'link', url: 'http://google.com', children: [{text: 'Links: Add links.'}]}],
-    id: 10052
+    type: 'layout',
+    layout: [1, 1],
+    children: [
+      {
+        type: 'layout-area',
+        children: [
+          {
+            type: 'paragraph',
+            children: [
+              {
+                text: 'hello'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: 'layout-area',
+        children: [
+          {
+            type: 'paragraph',
+            children: [
+              {
+                text: 'hii'
+              }
+            ]
+          }
+        ]
+      }
+    ]
   },
+  {type: 'action_item', checked: true, children: [{text: 'Slide to the right.'}]},
+  {type: 'action_item', children: [{text: 'Criss-cross.'}]},
+  {type: 'action_item', children: [{text: 'Third item'}]},
   {
     type: 'paragraph',
-    children: [{text: 'Bold: Make the selected text bold.', code: true}],
-    id: 10055
+    children: [
+      {text: ''},
+      {type: 'link', url: 'http://google.com', children: [{text: 'Links: Add linkss.'}]},
+      {text: ''}
+    ]
   },
-
-  {type: 'paragraph', children: [{text: 'Italic: Make the selected text italic.', italic: true}]},
+  {type: 'paragraph', children: [{text: 'Bold: Make the selected text bold. no?', code: true}]},
+  {type: 'paragraph', children: [{text: 'Italic: Make the selected text italicc.', italic: true}]},
   {
     type: 'paragraph',
-    children: [{text: 'Underline: Underline the selected text.', underline: true}]
+    children: [{text: 'Underline: Underline the selected textt.', underline: true}]
   },
   {
     type: 'paragraph',
-    children: [{text: 'Strikethrough: Strikethrough the selected text.', strikethrough: true}]
+    children: [{text: 'Strikethrough: Strikethrough the selected textt.', strikethrough: true}]
   },
   {
     type: 'paragraph',
@@ -55,12 +86,12 @@ const value: any = [
             type: 'table-cell',
             borderColor: '#000000',
             children: [{type: 'paragraph', children: [{text: ''}]}],
-            backgroundColor: '#f31212'
+            backgroundColor: 'lightgray'
           },
           {
             type: 'table-cell',
             children: [{type: 'paragraph', children: [{text: ''}]}],
-            backgroundColor: '#f31212'
+            backgroundColor: 'lightgray'
           }
         ]
       },
@@ -71,12 +102,12 @@ const value: any = [
             type: 'table-cell',
             borderColor: '#000000',
             children: [{type: 'paragraph', children: [{text: ''}]}],
-            backgroundColor: '#f31212'
+            backgroundColor: 'lightgray'
           },
           {
             type: 'table-cell',
             children: [{type: 'paragraph', children: [{text: ''}]}],
-            backgroundColor: '#f31212'
+            backgroundColor: 'lightgray'
           }
         ]
       }
@@ -90,7 +121,10 @@ const value: any = [
       {text: 'Make', color: '#c21414'},
       {text: ' the selected text bold.'}
     ]
-  }
+  },
+  {type: 'paragraph', children: [{text: ''}]},
+  {type: 'media_embed', url: 'https://youtu.be/6vcBKwnl_Y0', children: [{text: ''}]},
+  {type: 'paragraph', children: [{text: ''}]}
 ]
 
 /**
@@ -126,9 +160,10 @@ const toolbars = {
 const DreifussWysiwygEditorDemo = () => (
   <div style={{display: 'flex'}}>
     <div style={{minHeight: 400, padding: 30}}>
-      <h1>RichText Component Demo</h1>
+      <h1>WePublish Rich Text Editor</h1>
       <DreifussWysiwygEditor
         enablePlugins={{
+          layout: true,
           basicElements: true,
           basicMarks: true,
           list: true,
@@ -147,7 +182,7 @@ const DreifussWysiwygEditorDemo = () => (
           dnd: false
         }}
         onChange={e => {
-          // console.log(e)
+          console.log(JSON.stringify(e))
         }}
         id="two"
         value={value}

packages/core/src/utils/createPlateComponents.tsx

@@ -31,6 +31,8 @@ import {TodoListElement} from '@udecode/plate-list-ui'
 import {ELEMENT_MEDIA_EMBED} from '@udecode/plate-media-embed'
 import {MediaEmbedElement} from '@dreifuss-wysiwyg-editor/media-embed-ui'
 import {ELEMENT_PARAGRAPH} from '@udecode/plate-paragraph'
+import {LayoutContainer, LayoutArea} from '@dreifuss-wysiwyg-editor/layout-ui'
+import {ELEMENT_LAYOUT, ELEMENT_LAYOUT_AREA} from '@dreifuss-wysiwyg-editor/layout'
 import {ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TH, ELEMENT_TR} from '@dreifuss-wysiwyg-editor/table'
 import {TableElement, TableDataElement} from '@dreifuss-wysiwyg-editor/table-ui'
 import {StyledElement, StyledLeaf} from '@udecode/plate-styled-components'
@@ -111,6 +113,8 @@ export const createPlateComponents = (
       }
     }),
     [ELEMENT_LI]: withProps(StyledElement, {as: 'li'}),
+    [ELEMENT_LAYOUT]: LayoutContainer,
+    [ELEMENT_LAYOUT_AREA]: LayoutArea,
     [ELEMENT_LINK]: LinkElement,
     [ELEMENT_MEDIA_EMBED]: MediaEmbedElement,
     [ELEMENT_UL]: withProps(StyledElement, {
@@ -225,6 +229,7 @@ export const createPlateComponents = (
   }
 
   const componentsMap = {
+    layout: [ELEMENT_LAYOUT, ELEMENT_LAYOUT_AREA],
     search: [MARK_SEARCH_HIGHLIGHT],
     align: [ELEMENT_ALIGN_CENTER, ELEMENT_ALIGN_LEFT, ELEMENT_ALIGN_RIGHT, ELEMENT_ALIGN_JUSTIFY],
     list: [ELEMENT_UL, ELEMENT_OL, ELEMENT_LI],

packages/core/src/utils/createPlateOptions.tsx

@@ -28,6 +28,7 @@ import {MARK_SEARCH_HIGHLIGHT} from '@dreifuss-wysiwyg-editor/find-replace'
 import {ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, KEYS_HEADING} from '@udecode/plate-heading'
 import {DEFAULTS_HIGHLIGHT, MARK_HIGHLIGHT} from '@udecode/plate-highlight'
 import {ELEMENT_LINK} from '@dreifuss-wysiwyg-editor/link'
+import {ELEMENT_LAYOUT, ELEMENT_LAYOUT_AREA} from '@dreifuss-wysiwyg-editor/layout'
 import {ELEMENT_LI, ELEMENT_OL, ELEMENT_TODO_LI, ELEMENT_UL, ELEMENT_LIC} from '@udecode/plate-list'
 import {ELEMENT_MEDIA_EMBED} from '@udecode/plate-media-embed'
 import {ELEMENT_PARAGRAPH} from '@udecode/plate-paragraph'
@@ -74,6 +75,8 @@ export type DefaultPlatePluginKey =
   | typeof ELEMENT_IMAGE
   | typeof MARK_COLOR
   | typeof MARK_BG_COLOR
+  | typeof ELEMENT_LAYOUT
+  | typeof ELEMENT_LAYOUT_AREA
 
 const customTypes = {
   [ELEMENT_BLOCKQUOTE]: 'block-quote',
@@ -189,6 +192,7 @@ export const createPlateOptions = (
   }
 
   const optionsMap = {
+    layout: [ELEMENT_LAYOUT, ELEMENT_LAYOUT_AREA],
     align: [ELEMENT_ALIGN_CENTER, ELEMENT_ALIGN_LEFT, ELEMENT_ALIGN_RIGHT, ELEMENT_ALIGN_JUSTIFY],
     list: [ELEMENT_UL, ELEMENT_OL, ELEMENT_LI],
     todoList: [ELEMENT_TODO_LI],

packages/core/src/utils/createPlatePlugins.tsx

@@ -17,6 +17,7 @@ import {createHistoryPlugin, createReactPlugin} from '@udecode/plate-core'
 import {createImagePlugin, ELEMENT_IMAGE} from '@dreifuss-wysiwyg-editor/image'
 import {createLinkPlugin} from '@dreifuss-wysiwyg-editor/link'
 import {createFontColorPlugin, createFontBackgroundColorPlugin} from '@dreifuss-wysiwyg-editor/font'
+import {createLayoutPlugin} from '@dreifuss-wysiwyg-editor/layout'
 import {createSelectOnBackspacePlugin} from '@udecode/plate-select'
 import {
   createBoldPlugin,
@@ -48,7 +49,8 @@ export function plugins(enabledOptions: EnablePluginsProps, {findReplace}) {
     image: createImagePlugin(),
     media: createMediaEmbedPlugin(),
     highlight: createHighlightPlugin(),
-    dnd: createDndPlugin()
+    dnd: createDndPlugin(),
+    layout: createLayoutPlugin()
   }
   const options = createPlateOptions(enabledOptions)
 

packages/layout-ui/.npmignore

@@ -0,0 +1,3 @@
+__tests__
+__test-utils__
+__mocks__

packages/layout-ui/README.md

@@ -0,0 +1,3 @@
+# @dreifuss-wysiwyg-editor/link-ui
+
+This plugin is based on @udecode/plate-link-ui

packages/layout-ui/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@dreifuss-wysiwyg-editor/layout-ui",
+  "version": "0.0.0",
+  "description": "Dreifuss wysiwyg Editor layout ui plugin",
+  "keywords": [],
+  "homepage": "https://github.com/wepublish/dreifuss-wysiwyg-editor/tree/main/packages/layout-ui#readme",
+  "bugs": {
+    "url": "https://github.com/wepublish/dreifuss-wysiwyg-editor/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wepublish/dreifuss-wysiwyg-editor.git",
+    "directory": "packages/layout-ui"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist tsconfig.tsbuildinfo",
+    "build": "tsc && yarn rollup",
+    "watch": "yarn rollup -w",
+    "rollup": "rollup -c=../../rollup.config.js",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "slate": "^0.60.0",
+    "slate-react": "^0.60.0",
+    "slate-history": "^0.62.0"
+  },
+  "dependencies": {
+    "twin.macro": "^2.7.0",
+    "@babel/polyfill": "^7.12.1",
+    "@dreifuss-wysiwyg-editor/common": "^1.0.2-alpha.1",
+    "@dreifuss-wysiwyg-editor/layout": "0.0.0",
+    "@udecode/plate-core": "^1.0.0",
+    "styled-components": "^5.3.1",
+    "@udecode/plate-styled-components": "^3.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "@types/slate": "^0.47.8",
+    "@types/slate-react": "^0.50.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "slate": "^0.62.0",
+    "slate-react": "^0.62.0",
+    "@types/styled-components": "^5.1.13"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../package.json"
+    ]
+  },
+  "gitHead": "86b71bff4c9b87a901ef6ed530aa1b5882697797"
+}