@1build/remark-slate 中文文档教程

Question

remark-slate

将 slate 0.50+ 编辑器的内容转换为 markdown，然后再转换回来。

remark 插件将 Markdown 编译为 Slate 0.50+ 兼容对象。

Usage

Serializing from slate object to markdown:

remark-slate 导出一个自以为是的 serialize 函数，该函数旨在用 slate 0.50+ 状态对象调用并将该对象转换为 markdown文档。

import { serialize } from 'remark-slate';

export default ({ onChange }) => {
  const [value, setValue] = useState(initialValue);

  React.useEffect(() => {
    // serialize slate state to a markdown string
    onChange(value.map((v) => serialize(v)).join(''));
  }, [onChange, value]);

  return (
    <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
      <Editable
        renderElement={renderElement}
        renderLeaf={renderLeaf}
        placeholder="Enter some rich text…"
        ...
      />
      ...
    </Slate>
  );
};

Deserializing from markdown to slate object:

反序列化时，此包旨在与 remark-parse 一起使用

假设我们有以下文件 example.md：

# Heading one

## Heading two

### Heading three

#### Heading four

##### Heading five

###### Heading six

Normal paragraph

_italic text_

**bold text**

~~strike through text~~

[hyperlink](https://jackhanford.com)

> A block quote.

- bullet list item 1
- bullet list item 2

1. ordered list item 1
1. ordered list item 2

我们的脚本 example.js 如下所示：

import fs from 'fs';
import unified from 'unified';
import markdown from 'remark-parse';
import slate from 'remark-slate';

unified()
  .use(markdown)
  .use(slate)
  .process(fs.readFileSync('example.md'), (err, file) => {
    if (err) throw err;
    console.log({ file });
  });

将产生以下结果：

[
  {
    "type": "heading_one",
    "children": [
      {
        "text": "Heading one"
      }
    ]
  },
  {
    "type": "heading_two",
    "children": [
      {
        "text": "Heading two"
      }
    ]
  },
  {
    "type": "heading_three",
    "children": [
      {
        "text": "Heading three"
      }
    ]
  },
  {
    "type": "heading_four",
    "children": [
      {
        "text": "Heading four"
      }
    ]
  },
  {
    "type": "heading_five",
    "children": [
      {
        "text": "Heading five"
      }
    ]
  },
  {
    "type": "heading_six",
    "children": [
      {
        "text": "Heading six"
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "text": "Normal paragraph"
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "text": "italic text",
        "italic": true
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "text": "bold text",
        "italic": true
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "text": "strike through text",
        "strikeThrough": true
      }
    ]
  },
  {
    "type": "paragraph",
    "children": [
      {
        "type": "link",
        "link": "https://jackhanford.com",
        "children": [
          {
            "text": "hyperkink"
          }
        ]
      }
    ]
  },
  {
    "type": "block_quote",
    "children": [
      {
        "type": "paragraph",
        "children": [
          {
            "text": "A block quote."
          }
        ]
      }
    ]
  },
  {
    "type": "ul_list",
    "children": [
      {
        "type": "list_item",
        "children": [
          {
            "type": "paragraph",
            "children": [
              {
                "text": "bullet list item 1"
              }
            ]
          }
        ]
      },
      {
        "type": "list_item",
        "children": [
          {
            "type": "paragraph",
            "children": [
              {
                "text": "bullet list item 2"
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "type": "ol_list",
    "children": [
      {
        "type": "list_item",
        "children": [
          {
            "type": "paragraph",
            "children": [
              {
                "text": "ordered list item 1"
              }
            ]
          }
        ]
      },
      {
        "type": "list_item",
        "children": [
          {
            "type": "paragraph",
            "children": [
              {
                "text": "ordered list item 2"
              }
            ]
          }
        ]
      }
    ]
  }
]

{
  type: 'heading',
  depth: 1,
  children: [{ value: 'Big text' }]
}

...将产生：

{
  "type": "heading_one",
  "children": [{ "text": "Big text" }]
}

Local Development

下面是您的命令列表可能会发现有用。

npm start or yarn start

在开发/观察模式下运行项目。 该项目将根据变化重建。

如果您进行编辑，您的库将被重建。

npm run build or yarn build

将包捆绑到 dist 文件夹。 该包经过优化并与 Rollup 捆绑成多种格式（CommonJS、UMD 和 ES 模块）。

npm test or yarn test

以交互模式运行测试观察器 (Jest)。 默认情况下，运行与自上次提交以来更改的文件相关的测试。

License (MIT)

WWWWWW||WWWWWW
 W W W||W W W
      ||
    ( OO )__________
     /  |           \
    /o o|    MIT     \
    \___/||_||__||_|| *
         || ||  || ||
        _||_|| _||_||
       (__|__|(__|__|

版权所有 © 2020 年至今 Jack Hanford，jackhanford@gmail.com

特此免费向任何获得此软件副本的人授予许可，并且相关文档文件（“软件”），不受限制地处理软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，以及允许向其提供软件的人员必须遵守以下条件：

上述版权声明和本许可声明应包含在软件的所有副本或重要部分中。

本软件“按原样”提供，不提供任何明示或暗示的保证，包括但不限于对适销性、特定用途的适用性和非侵权性的保证。 在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论是在合同诉讼、侵权行为还是其他方面，由软件或软件的使用或其他交易引起、由软件引起或与之相关软件。