Skip to content

Commit

Permalink
feat: add svelte build
Browse files Browse the repository at this point in the history
  • Loading branch information
pd4d10 committed May 26, 2020
1 parent f151274 commit d40274c
Show file tree
Hide file tree
Showing 19 changed files with 276 additions and 224 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@
"@rollup/plugin-commonjs": "^11.0.0",
"@rollup/plugin-json": "^4.0.2",
"@rollup/plugin-node-resolve": "^7.0.0",
"@rollup/plugin-typescript": "^4.1.2",
"@testing-library/svelte": "^3.0.0",
"@types/react": "^16.9.35",
"jest": "^25.2.4",
"mustache": "^4.0.1",
"react": "^16.13.1",
"rollup": "^1.20.0",
"rollup-plugin-copy": "^3.3.0",
"rollup-plugin-css-only": "^2.0.0",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-node-builtins": "^2.1.2",
Expand All @@ -36,6 +38,7 @@
"serve": "^11.3.0",
"svelte": "^3.0.0",
"svelte-jester": "^1.0.5",
"tslib": "^2.0.0",
"typescript": "^3.8.3"
},
"jest": {
Expand Down
10 changes: 1 addition & 9 deletions packages/bytemd/.gitignore
Original file line number Diff line number Diff line change
@@ -1,9 +1 @@
/node_modules/
/public/build/

.DS_Store

*.js
*.d.ts
!src/index.js
!src/index.d.ts
/svelte/
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { SvelteComponent } from 'svelte';
import { HastNode } from '../helpers';
import { HastNode } from './helpers';
import * as cm from 'codemirror';

type Props = Record<string, unknown>;
Expand Down
18 changes: 7 additions & 11 deletions packages/bytemd/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,14 @@
"description": "Full-featured markdown editor and viewer",
"author": "Rongjian Zhang <pd4d10@gmail.com>",
"license": "MIT",
"main": "dist/bytemd.cjs.js",
"module": "dist/bytemd.esm.js",
"unpkg": "dist/bytemd.umd.js",
"svelte": "src/index.js",
"types": "src/index.d.ts",
"main": "dist/index.js",
"module": "dist/index.mjs",
"unpkg": "dist/bytemd.js",
"svelte": "svelte/index.js",
"types": "index.d.ts",
"files": [
"dist",
"src",
"helpers/index.d.ts",
"helpers/index.js",
"react/index.d.ts",
"react/index.js"
"**/dist",
"svelte"
],
"dependencies": {
"@types/codemirror": "^0.0.87",
Expand Down
5 changes: 5 additions & 0 deletions packages/bytemd/react/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"module": "dist/index.mjs",
"main": "dist/index.js",
"types": "dist/index.d.ts"
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { RefObject } from 'react';
import * as bytemd from '..';
import * as bytemd from 'bytemd';
import { SvelteComponent } from 'svelte';

class SvelteWrapper<
Expand Down
56 changes: 3 additions & 53 deletions packages/bytemd/src/Editor.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
<script>
import { onMount, createEventDispatcher } from 'svelte';
import codemirror from 'codemirror';
import 'codemirror/mode/markdown/markdown.js';
import { onMount } from 'svelte';
import Toolbar from './Toolbar.svelte';
import Viewer from './Viewer.svelte';
import { dataUrlFileHandler } from './utils.js';
const dispatch = createEventDispatcher();
import { dataUrlFileHandler, initEditor } from './utils';
export let value = '';
export let containerStyle;
Expand All @@ -29,53 +25,7 @@
}
onMount(() => {
cm = codemirror.fromTextArea(textarea, {
mode: 'markdown',
lineNumbers: true,
lineWrapping: true,
...editorConfig,
});
cm.setValue(value);
cm.on('change', (doc, change) => {
if (change.origin !== 'setValue') {
dispatch('change', { value: cm.getValue() });
}
});
cm.on('scroll', cm => {
requestAnimationFrame(() => {
const editorInfo = cm.getScrollInfo();
const ratio =
editorInfo.top / (editorInfo.height - editorInfo.clientHeight);
viewer.scrollTo(0, ratio * (viewer.scrollHeight - viewer.clientHeight));
});
});
cm.on('paste', async (_, e) => {
const { items } = e.clipboardData;
for (let i = 0; i < items.length; i++) {
// console.log(items[i]);
if (!items[i].type.startsWith('image/')) continue;
e.preventDefault();
const url = await fileHandler(items[i].getAsFile());
const text = cm.getSelection();
cm.replaceSelection(`![${text}](${url})`);
cm.focus();
return;
}
});
cm.on('drop', async (_, e) => {
const { items } = e.dataTransfer;
for (let i = 0; i < items.length; i++) {
if (!items[i].type.startsWith('image/')) continue;
e.preventDefault();
const url = await fileHandler(items[i].getAsFile());
const text = cm.getSelection();
cm.replaceSelection(`![${text}](${url})`);
cm.focus();
return;
}
});
initEditor(textarea, editorConfig, value, viewer, fileHandler);
});
</script>

Expand Down
14 changes: 2 additions & 12 deletions packages/bytemd/src/Element.svelte
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
<script>
import { findPlugin, santitizeHref } from './utils';
import Elements from './Elements.svelte';
import { santitizeHref } from './utils';
export let node;
export let plugins = [];
function findPlugin(node) {
for (let i = 0; i < plugins.length; i++) {
if (plugins[i].renderNode) {
const res = plugins[i].renderNode(node);
if (res) return res;
}
}
}
$: type = node.type;
$: value = node.value;
$: tagName = node.tagName;
Expand All @@ -25,7 +15,7 @@
$: height = properties && properties.height;
$: align = properties && properties.align;
$: res = findPlugin(node);
$: res = findPlugin(node, plugins);
</script>

{#if res}
Expand Down
27 changes: 13 additions & 14 deletions packages/bytemd/src/Toolbar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,18 @@
handleUl,
handleTask,
covertToHtml,
} from './utils.js';
import heading from 'icons/heading-16.svg';
import bold from 'icons/bold-16.svg';
import italic from 'icons/italic-16.svg';
import quote from 'icons/quote-16.svg';
import image from 'icons/image-16.svg';
import server from 'icons/server-16.svg';
import link from 'icons/link-16.svg';
import iconOl from 'icons/list-ordered-16.svg';
import iconUl from 'icons/list-unordered-16.svg';
import task from 'icons/tasklist-16.svg';
import html from 'icons/code-review-16.svg';
heading,
bold,
italic,
quote,
image,
server,
link,
iconOl,
iconUl,
task,
html,
} from './utils';
const dispatch = createEventDispatcher();
Expand Down Expand Up @@ -63,7 +62,7 @@
bind:this={fileInput}
type="file"
accept="image/*"
on:input={e => handleImage(cm, e, fileHandler)} />
on:input={(e) => handleImage(cm, e, fileHandler)} />

{#if mode === 'tab'}
<span class="bytemd-tab">
Expand Down
2 changes: 1 addition & 1 deletion packages/bytemd/src/Viewer.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import { getParser } from './utils.js';
import { getParser } from './utils';
import Elements from './Elements.svelte';
export let value = '';
Expand Down
4 changes: 4 additions & 0 deletions packages/bytemd/src/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
declare module '*.svg' {
let x: string;
export default x;
}
21 changes: 21 additions & 0 deletions packages/bytemd/src/utils/common.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import unified from 'unified';
import markdown from 'remark-parse';
import rehype from 'remark-rehype';
import raw from 'rehype-raw';
import { Plugin } from 'bytemd';

export function getParser(plugins: Plugin[]) {
let parser = unified()
.use(markdown)
.use(rehype, { allowDangerousHTML: true });

plugins.forEach((p) => {
if (Array.isArray(p.transformer)) {
parser = parser.use(...p.transformer);
} else if (p.transformer) {
parser = parser.use(p.transformer);
}
});

return parser.use(raw);
}
80 changes: 80 additions & 0 deletions packages/bytemd/src/utils/editor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { createEventDispatcher } from 'svelte';
import codemirror from 'codemirror';
import 'codemirror/mode/markdown/markdown.js';
import { EditorProps } from 'bytemd';

export function initEditor(
textarea: HTMLTextAreaElement,
editorConfig: any,
value: string,
viewer: HTMLElement,
fileHandler: NonNullable<EditorProps['fileHandler']>
) {
const dispatch = createEventDispatcher();

const cm = codemirror.fromTextArea(textarea, {
mode: 'markdown',
lineNumbers: true,
lineWrapping: true,
...editorConfig,
});
cm.setValue(value);
cm.on('change', (doc, change) => {
if (change.origin !== 'setValue') {
dispatch('change', { value: cm.getValue() });
}
});
cm.on('scroll', (cm) => {
requestAnimationFrame(() => {
const editorInfo = cm.getScrollInfo();
const ratio =
editorInfo.top / (editorInfo.height - editorInfo.clientHeight);
viewer.scrollTo(0, ratio * (viewer.scrollHeight - viewer.clientHeight));
});
});
cm.on('paste', async (_, e) => {
const { items } = e.clipboardData;
for (let i = 0; i < items.length; i++) {
// console.log(items[i]);
if (!items[i].type.startsWith('image/')) continue;

e.preventDefault();
const url = await fileHandler(items[i].getAsFile());
const text = cm.getSelection();
cm.replaceSelection(`![${text}](${url})`);
cm.focus();
return;
}
});
cm.on('drop', async (_, e) => {
const { items } = e.dataTransfer;
for (let i = 0; i < items.length; i++) {
if (!items[i].type.startsWith('image/')) continue;

e.preventDefault();
const url = await fileHandler(items[i].getAsFile());
const text = cm.getSelection();
cm.replaceSelection(`![${text}](${url})`);
cm.focus();
return;
}
});

return cm;
}

export const dataUrlFileHandler: Exclude<
EditorProps['fileHandler'],
undefined
> = async (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('load', (e) => {
resolve(e.target!.result as string);
});
reader.addEventListener('error', (e) => {
reject(new Error('readAsDataURL error'));
});
reader.readAsDataURL(file);
});
};
19 changes: 19 additions & 0 deletions packages/bytemd/src/utils/element.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Plugin } from 'bytemd';
import { HastNode } from '../../helpers';

export function findPlugin(node: HastNode, plugins: Plugin[]) {
for (let i = 0; i < plugins.length; i++) {
const { renderNode } = plugins[i];
if (renderNode) {
return renderNode(node);
}
}
}

export const santitizeHref = (href?: string) => {
if (href && href.trim().toLowerCase().startsWith('javascript')) {
return;
} else {
return href;
}
};
41 changes: 41 additions & 0 deletions packages/bytemd/src/utils/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
export { getParser } from './common';
export { initEditor, dataUrlFileHandler } from './editor';
export { findPlugin, santitizeHref } from './element';
export {
handleDec,
handleTag,
handleBlockquote,
handleLink,
handleImage,
handleTable,
handleHeading,
handleOl,
handleUl,
handleTask,
covertToHtml,
} from './toolbar';

import heading from 'icons/heading-16.svg';
import bold from 'icons/bold-16.svg';
import italic from 'icons/italic-16.svg';
import quote from 'icons/quote-16.svg';
import image from 'icons/image-16.svg';
import server from 'icons/server-16.svg';
import link from 'icons/link-16.svg';
import iconOl from 'icons/list-ordered-16.svg';
import iconUl from 'icons/list-unordered-16.svg';
import task from 'icons/tasklist-16.svg';
import html from 'icons/code-review-16.svg';
export {
heading,
bold,
italic,
quote,
image,
server,
link,
iconOl,
iconUl,
task,
html,
};

0 comments on commit d40274c

Please sign in to comment.