[migrate] move File Uploader & Markdown Editor to independent packages

Author: TechQuery

ReadMe.md

@@ -17,7 +17,6 @@
 ```shell
 npm install boot-cell \
     iterable-observer \
-    marked turndown turndown-plugin-gfm markdown-ime \
     quill quill-image-uploader \
     @nuintun/qrcode
 ```
@@ -129,10 +128,8 @@ npm install boot-cell \
 9. [Field](https://web-cell.dev/BootCell/interfaces/form_field.fieldprops.html)
 10. [FormField](https://web-cell.dev/BootCell/interfaces/form_formfield.formfieldprops.html)
 11. [InputGroup](https://web-cell.dev/BootCell/interfaces/form_inputgroup.inputgroupprops.html)
-12. [FileUploader](https://web-cell.dev/BootCell/interfaces/form_fileuploader.fileuploaderprops.html)
-13. [FileInput](https://web-cell.dev/BootCell/interfaces/form_fileinput.fileinputprops.html)
-14. [MarkdownEditor](https://web-cell.dev/BootCell/interfaces/form_markdowneditor.markdowneditorprops.html)
-15. [HTMLEditor](https://web-cell.dev/BootCell/interfaces/form_htmleditor.htmleditorprops.html)
+12. [FileInput](https://web-cell.dev/BootCell/interfaces/form_fileinput.fileinputprops.html)
+13. [HTMLEditor](https://web-cell.dev/BootCell/interfaces/form_htmleditor.htmleditorprops.html)
 
 ### Calendar
 
@@ -155,8 +152,7 @@ npm install boot-cell \
 
 ## Utilities
 
-1. [SafeTurnDown](https://web-cell.dev/BootCell/classes/utility_turndown.safeturndown.html)
-2. [encodeQRC](https://web-cell.dev/BootCell/modules/utility_qrcode.html#encodeqrc)
+1. [encodeQRC](https://web-cell.dev/BootCell/modules/utility_qrcode.html#encodeqrc)
 
 ## Theme
 

package.json

@@ -26,6 +26,7 @@
     "dependencies": {
         "@swc/helpers": "^0.3.2",
         "classnames": "^2.3.1",
+        "file-cell": "^0.1.0",
         "regenerator-runtime": "^0.13.9",
         "web-cell": "^2.4.0-rc.6",
         "web-utility": "^3.0.0"
@@ -37,13 +38,9 @@
         "bootstrap-icons": "^1.0.0",
         "dialog-polyfill": "^0.5.0",
         "iterable-observer": "^1.0.0-rc.0",
-        "markdown-ime": "^1.0.3",
-        "marked": "^4.0.0",
         "quill": "^1.3.7",
         "quill-image-uploader": "^1.2.2",
-        "share-api-polyfill": "1.0.21",
-        "turndown": "^7.1.1",
-        "turndown-plugin-gfm": "^1.0.2"
+        "share-api-polyfill": "1.0.21"
     },
     "devDependencies": {
         "@jest/types": "^27.4.2",
@@ -55,7 +52,6 @@
         "@tech_query/snabbdom-looks-like": "^2.0.1",
         "@types/classnames": "^2.3.1",
         "@types/jest": "^27.4.0",
-        "@types/marked": "^4.0.2",
         "@types/quill": "^2.0.9",
         "@types/resize-observer-browser": "^0.1.7",
         "@types/turndown": "^5.0.1",
@@ -68,8 +64,7 @@
         "jest": "^27.4.7",
         "less": "^4.1.2",
         "lint-staged": "^12.3.3",
-        "markdown-ime": "^1.0.3",
-        "marked": "^4.0.12",
+        "markdown-area-element": "^0.2.3",
         "open-cli": "^7.0.1",
         "parcel": "^2.2.1",
         "postcss": "^8.4.6",
@@ -78,9 +73,8 @@
         "quill-image-uploader": "^1.2.2",
         "ts-jest": "^27.1.3",
         "ts-node": "^10.4.0",
-        "turndown": "^7.1.1",
-        "turndown-plugin-gfm": "^1.0.2",
         "typedoc": "^0.22.11",
+        "typedoc-plugin-mdn-links": "^1.0.5",
         "typescript": "~4.3.5"
     },
     "scripts": {

source/Calendar/MonthCalendar.tsx

@@ -127,7 +127,7 @@ export class MonthCalendar extends mixin<
         { dayGrid }: MonthCalendarState
     ) {
         return (
-            <Fragment>
+            <>
                 <header className="d-flex justify-content-between align-items-center py-3">
                     <IconButton
                         className="px-2"
@@ -148,7 +148,7 @@ export class MonthCalendar extends mixin<
                         <tr>{this.renderRow(row, index)}</tr>
                     ))}
                 </CalendarTable>
-            </Fragment>
+            </>
         );
     }
 }

source/Content/Card.tsx

@@ -129,12 +129,12 @@ export function Card({
             )}
         >
             {column ? (
-                <Fragment>
+                <>
                     {header}
                     {banner}
                     {body}
                     {footer}
-                </Fragment>
+                </>
             ) : (
                 <div className="row no-gutters align-items-center">
                     <div className="col-md-4">{banner}</div>

source/Content/EdgeDetector.tsx

@@ -42,7 +42,7 @@ export class EdgeDetector extends mixin<EdgeDetectorProps>() {
 
     render() {
         return (
-            <Fragment>
+            <>
                 <div ref={this.watch.bind(this, 'top')}>
                     <slot name="top" />
                 </div>
@@ -60,7 +60,7 @@ export class EdgeDetector extends mixin<EdgeDetectorProps>() {
                 <div ref={this.watch.bind(this, 'bottom')}>
                     <slot name="bottom" />
                 </div>
-            </Fragment>
+            </>
         );
     }
 }

source/Content/Jumbotron.tsx

@@ -16,17 +16,17 @@ export function Jumbotron({
     ...rest
 }: JumbotronProps) {
     const content = (
-        <Fragment>
+        <>
             <h1 className="display-4">{title}</h1>
             <p className="lead">{description}</p>
 
             {defaultSlot[0] && (
-                <Fragment>
+                <>
                     <hr className="my-4" />
                     {defaultSlot}
-                </Fragment>
+                </>
             )}
-        </Fragment>
+        </>
     );
 
     return (

source/Content/MediaObject.tsx

@@ -28,7 +28,7 @@ export function MediaObject({
     const Tag = listItem ? 'li' : 'div',
         Class = classNames('d-flex', !start && 'flex-row-reverse', className);
     const body = (
-        <Fragment>
+        <>
             <div className="flex-shrink-0">
                 {typeof image === 'string' ? (
                     <img
@@ -45,7 +45,7 @@ export function MediaObject({
                 <h5 className="mt-0">{title}</h5>
                 {defaultSlot}
             </div>
-        </Fragment>
+        </>
     );
 
     return (

source/Content/SplitView.tsx

@@ -36,7 +36,7 @@ export class SplitView extends mixin() {
         const [left, right] = this.defaultSlot;
 
         return (
-            <Fragment>
+            <>
                 <div style={{ width: '25%' }}>{left}</div>
                 <div
                     className="border border-secondary m-1"
@@ -46,7 +46,7 @@ export class SplitView extends mixin() {
                     ref={this.watchLine}
                 />
                 <div className="flex-fill">{right}</div>
-            </Fragment>
+            </>
         );
     }
 }

source/Content/TabView.tsx

@@ -259,7 +259,7 @@ export class TabView extends mixin<TabViewProps>() {
         );
 
         return (
-            <Fragment>
+            <>
                 {type === 'nav' ? (
                     <Nav
                         direction={direction}
@@ -285,7 +285,7 @@ export class TabView extends mixin<TabViewProps>() {
                 )}
 
                 <div className={bodyClass}>{bodies}</div>
-            </Fragment>
+            </>
         );
     }
 }

source/Form/FileInput/index.tsx

@@ -7,8 +7,8 @@ import {
     watch,
     createCell
 } from 'web-cell';
+import { FileCell } from 'file-cell';
 
-import { FileUploader } from '../FileUploader';
 import style from './index.less';
 
 export interface FileInputProps extends WebFieldProps {
@@ -58,7 +58,7 @@ export class FileInput extends mixinForm<FileInputProps>() {
     connectedCallback() {
         this.classList.add(style.fileBox);
 
-        this.closest<FileUploader>('file-uploader')?.addEventListener(
+        this.closest<FileCell>('file-cell')?.addEventListener(
             'upload',
             ({ detail: { file, path } }) => {
                 if (file === this.files[0]) this.value = path;