@kedao/editor/package.json

Rich Text Editor Based On Draft.js

{
  "name": "@kedao/editor",
  "version": "0.0.2",
  "description": "Rich Text Editor Based On Draft.js",
  "main": "./lib/index.js",
  "module": "./lib/index.js",
  "types": "./lib/index.d.ts",
  "author": "banyudu",
  "files": [
    "lib"
  ],
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
  },
  "repository": "https://github.com/banyudu/kedao",
  "keywords": [
    "kedao",
    "draft",
    "draft-js",
    "rich",
    "text",
    "editor",
    "rich-text-editor",
    "wysiwyg"
  ],
  "license": "MIT",
  "devDependencies": {
    "@types/draft-js": "^0.10.38",
    "@types/react": "^16.9.23",
    "draft-js-prism": "^1.0.6",
    "node-sass": "^4.13.1",
    "prism-js": "^1.0.0",
    "prismjs": "^1.15.0"
  },
  "dependencies": {
    "@draft-js-plugins/mention": "^5.1.1",
    "@kedao/convert": "0.0.2",
    "@kedao/finder": "0.0.2",
    "@kedao/utils": "0.0.2",
    "draft-convert": "^2.1.8",
    "draft-js": "^0.11.5",
    "draft-js-multidecorators": "^1.0.0",
    "draftjs-utils": "^0.10.2",
    "immutable": "~4.0.0",
    "merge-class-names": "^1.4.2",
    "prop-types": "^15.7.2",
    "react-color": "^2.14.1",
    "uuid": "^8.3.2"
  },
  "peerDependencies": {
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
  },
  "scripts": {
    "build": "rm -rf lib && tsc"
  },
  "readme": "# Kedao Editor-EN\n\n> A web rich text editor based on draft-js, suitable for React framework, compatible with mainstream modern browsers.\n\n## Please understand before using\n\nKedao Editor is an editor based on draft-js. Draft-js does not directly use HTML as the component state. It implements an EditorState type, which is essentially a JS object. In the traditional rich text editor, The piece of HTML content corresponding to EditorState is a block; this can be verified by looking at editorState.toRAW ().\n\nThe advantage of using EditorState instead of HTML strings is that a set of EditorState can be used on multiple ends, and the content produced by the editor is no longer limited to being displayed on the web platform (of course, each platform also needs to implement the corresponding EditorState to View conversion function) At the same time, it is more suitable for the component state of React.\n\nHowever, in the above implementation, the biggest problem is that it cannot perfectly convert external HTML into EditorState, because its supported styles, tags, tag attributes, and so on are extremely limited, and there is no way to convert all the features in HTML to the state in EditorState. , When using third-party or historical HTML strings to initialize the editor content, and when pasting external HTML content, only a small number of styles and tag attributes supported by the editor can be retained, most of the content will be filtered or Ignore it.\n\nBased on the above shortcomings, if your project strongly depends on the original HTML tags and attributes, etc., this editor is not recommended.\n\n### Editor-specific extension packs have been released, please see [Extensions](https://github.com/banyudu/kedao/tree/main/packages/extensions)\n\nThe form extension module has been released in a test version. Please upgrade craft-editor and craft-utils to the latest version and install the latest version of craft-extensions. For the usage, please see [[form extension module](https://github.com/banyudu/kedao/tree/main/packages/extensions)]\n\n## Features\n\n- Perfect text content editing function\n- Many open editing interfaces, good scalability\n- Allows inserting multimedia content such as pictures, audio and video\n- Allows to customize the upload interface of multimedia content\n- Allow to set the image to float left and right (ie text wrapping function)\n- Allows setting the color list, font size, and fonts available to the editor\n- Allows customizing the control buttons and display order to be displayed\n- Allows adding additional custom buttons\n- Multi-language support (Simplified Chinese, Traditional Chinese, English, Polish, Japanese, Korean, Turkish)\n- ... More features under development\n\n## Recent updates\n\n[View history update record](https://github.com/banyudu/kedao/blob/main/CHANGELOG.md)\n\n## installation\n\n```bash\n# Install using yarn\nyarn add @kedao/editor\n# Install using npm\nnpm install kedao-editor --save\n```\n\n## use\n\nThe editor supports **value** and **onChange** properties, which are similar to the native input components in React. In general, you can use this editor in the form of a typical **controlled component**:\n\n```jsx\nimport React from 'react'\nimport KedaoEditor from '@kedao/editor'\nimport '@kedao/editor/dist/index.css'\n\nexport default class EditorDemo extends React.Component<any, any> {\n\n  state = {\n      editorState: null\n  }\n\n  async componentDidMount () {\n    // Assume here to get the editor content in html format from the server\n    const htmlContent = await fetchEditorContent()\n    // Use KedaoEditor.createEditorState to convert html strings to editorState data needed by the editor\n    this.setState({\n      editorState: KedaoEditor.createEditorState(htmlContent)\n    })\n  }\n\n  submitContent = async () => {\n    // Pressing ctrl + s when the editor has focus will execute this method\n    // Before the editor content is submitted to the server, you can directly call editorState.toHTML () to get the HTML content\n    const htmlContent = this.state.editorState.toHTML()\n    const result = await saveEditorContent(htmlContent)\n  }\n\n  handleEditorChange = (editorState) => {\n    this.setState({ editorState })\n  }\n\n  render () {\n\n    const { editorState } = this.state\n\n    return (\n      <div className=\"my-component\">\n        <KedaoEditor\n          value={editorState}\n          onChange={this.handleEditorChange}\n          onSave={this.submitContent}\n        />\n      </div>\n    )\n\n  }\n\n}\n```\n\nOf course, this editor also supports the **defaultValue** property, so you can also use this editor as a **uncontrolled component**.\n-------\n"
}