chore: use workspace & update sample preview.

uiwjs · Jun 9, 2022 · 5c43acf · 5c43acf
1 parent 9f2539e
commit 5c43acf
Show file tree

Hide file tree

Showing 69 changed files with 369 additions and 489 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -8,22 +8,30 @@ jobs:
   build-deploy:
     runs-on: ubuntu-18.04
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
       with:
-        node-version: 14
+        node-version: 16
 
     - run: npm install
-    - run: npm run doc
-    - run: npm run map
-    - run: npm run bundle
-    - run: npm run bundle:min
-    - run: npm run coverage
+    - working-directory: core
+      run: |
+        npm run build
+        npm run bundle
+        npm run bundle:min
+        npm run coverage
+
+    - working-directory: www
+      run: |
+        npm run build
+        npm run map
+    
+    - run: cp -rp core/coverage ./
 
     - name: Create Coverage Badges
       uses: jaywcjlove/coverage-badges-cli@main
 
-    - run: npm run doc
+    - run: cp -rp www/build ./
     - run: cp -rp coverage build
 
     - name: Generate Contributors Images
@@ -37,11 +45,11 @@ jobs:
       id: create_tag
       uses: jaywcjlove/[email protected]
       with:
-        package-path: ./package.json
+        package-path: ./core/package.json
 
     - name: get tag version
       id: tag_version
-      uses: jaywcjlove/[email protected].0
+      uses: jaywcjlove/[email protected].3
 
     - name: Deploy
       uses: peaceiris/actions-gh-pages@v3
@@ -55,7 +63,7 @@ jobs:
 
     - name: Generate Changelog
       id: changelog
-      uses: jaywcjlove/[email protected].0
+      uses: jaywcjlove/[email protected].3
       with:
         head-ref: ${{steps.create_tag.outputs.version}}
         filter-author: (renovate-bot|Renovate Bot)
@@ -64,7 +72,7 @@ jobs:
     - name: Create Release
       uses: jaywcjlove/[email protected]
       with:
-        package-path: ./package.json
+        package-path: ./core/package.json
         release: true
         body: |
           [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-md-editor@${{steps.changelog.outputs.version}}/file/README.md)
@@ -82,5 +90,5 @@ jobs:
       uses: JS-DevTools/npm-publish@v1
       with:
         token: ${{ secrets.NPM_TOKEN }}
-        package: ./package.json
+        package: ./core/package.json
 
diff --git a/.kktrc.ts b/.kktrc.ts
diff --git a/core/.kktrc.ts b/core/.kktrc.ts
@@ -0,0 +1,22 @@
+// import path from 'path';
+import { Configuration } from 'webpack';
+import { LoaderConfOptions } from 'kkt';
+import lessModules from '@kkt/less-modules';
+// import rawModules from '@kkt/raw-modules';
+// import pkg from './package.json';
+
+export default (conf: Configuration, env: 'production' | 'development', options: LoaderConfOptions) => {
+  conf = lessModules(conf, env, options);
+  if (options.bundle) {
+    conf.output!.library = '@uiw/react-md-editor';
+    conf.externals = {
+      react: {
+        root: 'React',
+        commonjs2: 'react',
+        commonjs: 'react',
+        amd: 'react',
+      },
+    };
+  }
+  return conf;
+};
diff --git a/README.md → core/README.md b/README.md → core/README.md
@@ -58,7 +58,7 @@ npm i @uiw/react-md-editor
 [![Open in Github gh-pages](https://img.shields.io/badge/Open%20In-Github%20gh--pages-blue?logo=github)](https://uiwjs.github.io/react-md-editor/)
 [![Open in Gitee gh-pages](https://img.shields.io/badge/Open%20In-Gitee%20gh--pages-blue?logo=web)](https://uiw.gitee.io/react-md-editor/)
 
-```jsx
+```jsx mdx:preview
 import React from "react";
 import MDEditor from '@uiw/react-md-editor';
 
@@ -70,7 +70,7 @@ export default function App() {
         value={value}
         onChange={setValue}
       />
-      <MDEditor.Markdown source={value} />
+      <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
     </div>
   );
 }
@@ -81,13 +81,13 @@ export default function App() {
 Please note markdown needs to be sanitized if you do not **completely trust** your authors.
 Otherwise, your app is vulnerable to XSS. This can be achieved by adding [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize) as a plugin.
 
-```jsx
+```jsx mdx:preview
 import React from "react";
 import MDEditor from '@uiw/react-md-editor';
 import rehypeSanitize from "rehype-sanitize";
 
 export default function App() {
-  const [value, setValue] = React.useState("**Hello world!!!** <IFRAME SRC="javascript:javascript:alert(window.origin);"></IFRAME>");
+  const [value, setValue] = React.useState(`**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>`);
   return (
     <div className="container">
       <MDEditor
@@ -97,10 +97,6 @@ export default function App() {
           rehypePlugins: [[rehypeSanitize]],
         }}
       />
-      <MDEditor.Markdown 
-        source={value} 
-        rehypePlugins={[[rehypeSanitize]]}
-      />
     </div>
   );
 }
@@ -110,12 +106,11 @@ export default function App() {
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-custom-toolbars-m2n10?fontsize=14&hidenavigation=1&theme=dark)
 
-```tsx
+```jsx mdx:preview
 import React from "react";
-import ReactDOM from "react-dom";
-import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from '@uiw/react-md-editor';
+import MDEditor, { commands } from '@uiw/react-md-editor';
 
-const title3: ICommand = {
+const title3 = {
   name: 'title3',
   keyCommand: 'title3',
   buttonProps: { 'aria-label': 'Insert title3' },
@@ -124,7 +119,7 @@ const title3: ICommand = {
       <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
     </svg>
   ),
-  execute: (state: TextState, api: TextAreaTextApi) => {
+  execute: (state, api) => {
     let modifyText = `### ${state.selectedText}\n`;
     if (!state.selectedText) {
       modifyText = `### `;
@@ -134,14 +129,12 @@ const title3: ICommand = {
 };
 
 export default function App() {
-  const [value, setValue] = React.useState("**Hello world!!!**");
+  const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
   return (
     <div className="container">
       <MDEditor
-        value="Hello Markdown!"
-        onChange={(val) => {
-          setValue(val!);
-        }}
+        value={value}
+        onChange={setValue}
         commands={[
           // Custom Toolbars
           title3,
@@ -163,13 +156,13 @@ export default function App() {
               return (
                 <div style={{ width: 120, padding: 10 }}>
                   <div>My Custom Toolbar</div>
-                  <button type="button" onClick={() => console.log('> execute: >>>>>', getState!())}>State</button>
+                  <button type="button" onClick={() => console.log('> execute: >>>>>', getState())}>State</button>
                   <button type="button" onClick={() => close()}>Close</button>
                   <button type="button" onClick={() => execute()}>Execute</button>
                 </div>
               );
             },
-            execute: (state: TextState, api: TextAreaTextApi)  => {
+            execute: (state, api)  => {
               console.log('>>>>>>update>>>>>', state)
             },
             buttonProps: { 'aria-label': 'Insert title'}
@@ -185,7 +178,7 @@ export default function App() {
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-preview-markdown-vrucl?fontsize=14&hidenavigation=1&theme=dark)
 
-```jsx
+```jsx mdx:preview
 import React from "react";
 import ReactDOM from "react-dom";
 import MDEditor from '@uiw/react-md-editor';
@@ -213,7 +206,7 @@ The following example is preview in [CodeSandbox](https://codesandbox.io/s/markd
 npm install katex
 ```
 
-```jsx
+```jsx mdx:preview
 import React from "react";
 import ReactDOM from "react-dom";
 import MDEditor from '@uiw/react-md-editor';
@@ -271,7 +264,7 @@ export default function App() {
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-text-to-images-ijqmx?fontsize=14&hidenavigation=1&theme=dark)
 
-```jsx
+```tsx mdx:preview
 import React from "react";
 import MDEditor, { commands, ICommand, TextState, TextAreaTextApi } from "@uiw/react-md-editor";
 import domToImage from "dom-to-image";
@@ -286,7 +279,7 @@ const textToImage: ICommand = {
     </svg>
   ),
   execute: (state: TextState, api: TextAreaTextApi) => {
-    const dom = document.getElementsByClassName("w-md-editor")[0];
+    const dom = document.getElementsByClassName("gooooooooo")[0];
     if (dom) {
       domToImage.toJpeg(dom, {}).then((dataUrl) => {
         const link = document.createElement("a");
@@ -302,6 +295,7 @@ export default function App() {
   return (
     <div className="container">
       <MDEditor
+        className="gooooooooo"
         value="**Hello world!!!**"
         commands={[
           textToImage,
@@ -323,7 +317,7 @@ Using [mermaid](https://github.com/mermaid-js/mermaid) to generation of diagram
 npm install mermaid
 ```
 
-```jsx
+```jsx mdx:preview
 import React, { useState, useRef, useEffect } from "react";
 import ReactDOM from "react-dom";
 import MDEditor from "@uiw/react-md-editor";
@@ -353,7 +347,7 @@ Bob-->>John: Jolly good!
 `;
 
 const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
-const Code = ({ inline, children = [], className, ...props }: any) => {
+const Code = ({ inline, children = [], className, ...props }) => {
   const demoid = useRef(`dome${randomid()}`);
   const code = getCode(children);
   const demo = useRef(null);