docs: 📝 只读模式DEMO

docs/demos/base.tsx

@@ -4,7 +4,14 @@ import React, { useState } from 'react';
 import type { Descendant } from 'slate';
 
 export default () => {
-  const [value, setValue] = useState<Descendant[]>([
+  const [value1, setValue1] = useState<Descendant[]>([
+    {
+      type: 'paragraph',
+      children: [{ text: '' }],
+    },
+  ]);
+
+  const [value2, setValue2] = useState<Descendant[]>([
     {
       type: 'paragraph',
       children: [{ text: '' }],
@@ -14,15 +21,15 @@ export default () => {
   return (
     <>
       <DSlateAntd
-        value={value}
-        onChange={setValue}
+        value={value1}
+        onChange={setValue1}
         placeholder="Antd 风格编辑器"
       />
       <br />
       <br />
       <DSlateSemi
-        value={value}
-        onChange={setValue}
+        value={value2}
+        onChange={setValue2}
         placeholder="Semi 风格编辑器"
       />
     </>

docs/demos/display-mode.tsx

@@ -0,0 +1,99 @@
+import { Editable } from '@dslate/component';
+import { ConfigProvider, DSlateCore } from '@dslate/core';
+
+import DefaultPlugin from '@dslate/plugin';
+import React, { useState } from 'react';
+import type { Descendant } from 'slate';
+import styled from 'styled-components';
+
+const ResetStyleBox = styled.div`
+  .dslate-editable {
+    min-height: 400px !important;
+
+    h1 {
+      font-size: xx-large !important;
+    }
+
+    h2 {
+      font-size: x-large !important;
+    }
+
+    h3 {
+      font-size: large !important;
+    }
+
+    h4 {
+      font-size: medium !important;
+    }
+
+    h5 {
+      font-size: small !important;
+    }
+
+    h6 {
+      font-size: x-small !important;
+    }
+
+    * {
+      margin: 0;
+
+      &::selection {
+        color: inherit;
+        background-color: rgba(var(--semi-blue-5), 0.15);
+      }
+    }
+  }
+`;
+export default () => {
+  const [value, setValue] = useState<Descendant[]>([
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: 'hi! ',
+        },
+      ],
+      paragraphType: 'h1',
+      'line-height': 1.5,
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: 'this is ',
+        },
+        {
+          text: 'display mode',
+          underline: true,
+          color: '#ff6900',
+        },
+        {
+          text: '!',
+        },
+      ],
+      paragraphType: 'h3',
+      'line-height': 1.5,
+    },
+  ]);
+
+  return (
+    <ResetStyleBox>
+      <ConfigProvider
+        value={{
+          plugins: Object.values(DefaultPlugin),
+          locale: '',
+          locales: [],
+        }}
+      >
+        <DSlateCore
+          value={value}
+          onChange={function (value: Descendant[]): void {
+            // do nothing...
+          }}
+        >
+          <Editable disabled />
+        </DSlateCore>
+      </ConfigProvider>
+    </ResetStyleBox>
+  );
+};

docs/getting-started/display-mode.md

@@ -0,0 +1,13 @@
+---
+title: 只读展示模式
+order: 8
+nav: 文档
+---
+
+# 只读展示模式/Display Mode
+
+直接使用 json 数据进行展示，该模式下不依赖任何 UI 框架，并且不可对内容进行编辑
+
+## Demo
+
+<code src="../demos/display-mode.tsx"></code>

package.json

@@ -76,6 +76,7 @@
     "react-dom": "^18.2.0",
     "slate": "^0.103.0",
     "slate-react": "^0.104.0",
+    "styled-components": "^5.3.6",
     "stylelint": "^15.9.0",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yorkie": "^2.0.0"