')
50 | },
51 | quote: {
52 | icon: '“ ”',
53 | title: 'Quote',
54 | result: () => exec(formatBlock, '
')
55 | },
56 | olist: {
57 | icon: '#',
58 | title: 'Ordered List',
59 | result: () => exec('insertOrderedList')
60 | },
61 | ulist: {
62 | icon: '•',
63 | title: 'Unordered List',
64 | result: () => exec('insertUnorderedList')
65 | },
66 | code: {
67 | icon: '</>',
68 | title: 'Code',
69 | result: () => exec(formatBlock, '')
70 | },
71 | line: {
72 | icon: '―',
73 | title: 'Horizontal Line',
74 | result: () => exec('insertHorizontalRule')
75 | },
76 | link: {
77 | icon: '🔗',
78 | title: 'Link',
79 | result: () => {
80 | const url = window.prompt('Enter the link URL')
81 | if (url) exec('createLink', url)
82 | }
83 | },
84 | image: {
85 | icon: '📷',
86 | title: 'Image',
87 | result: () => {
88 | const url = window.prompt('Enter the image URL')
89 | if (url) exec('insertImage', url)
90 | }
91 | }
92 | }
93 |
94 | const defaultClasses = {
95 | actionbar: 'pell-actionbar',
96 | button: 'pell-button',
97 | content: 'pell-content',
98 | selected: 'pell-button-selected'
99 | }
100 |
101 | export const init = settings => {
102 | const actions = settings.actions
103 | ? (
104 | settings.actions.map(action => {
105 | if (typeof action === 'string') return defaultActions[action]
106 | else if (defaultActions[action.name]) return { ...defaultActions[action.name], ...action }
107 | return action
108 | })
109 | )
110 | : Object.keys(defaultActions).map(action => defaultActions[action])
111 |
112 | const classes = { ...defaultClasses, ...settings.classes }
113 |
114 | const defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div'
115 |
116 | const actionbar = createElement('div')
117 | actionbar.className = classes.actionbar
118 | appendChild(settings.element, actionbar)
119 |
120 | const content = settings.element.content = createElement('div')
121 | content.contentEditable = true
122 | content.className = classes.content
123 | content.oninput = ({ target: { firstChild } }) => {
124 | if (firstChild && firstChild.nodeType === 3) exec(formatBlock, `<${defaultParagraphSeparator}>`)
125 | else if (content.innerHTML === '
') content.innerHTML = ''
126 | settings.onChange(content.innerHTML)
127 | }
128 | content.onkeydown = event => {
129 | if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
130 | setTimeout(() => exec(formatBlock, `<${defaultParagraphSeparator}>`), 0)
131 | }
132 | }
133 | appendChild(settings.element, content)
134 |
135 | actions.forEach(action => {
136 | const button = createElement('button')
137 | button.className = classes.button
138 | button.innerHTML = action.icon
139 | button.title = action.title
140 | button.setAttribute('type', 'button')
141 | button.onclick = () => action.result() && content.focus()
142 |
143 | if (action.state) {
144 | const handler = () => button.classList[action.state() ? 'add' : 'remove'](classes.selected)
145 | addEventListener(content, 'keyup', handler)
146 | addEventListener(content, 'mouseup', handler)
147 | addEventListener(button, 'click', handler)
148 | }
149 |
150 | appendChild(actionbar, button)
151 | })
152 |
153 | if (settings.styleWithCSS) exec('styleWithCSS')
154 | exec(defaultParagraphSeparatorString, defaultParagraphSeparator)
155 |
156 | return settings.element
157 | }
158 |
159 | export default { exec, init }
160 |
--------------------------------------------------------------------------------
/test/blah.test.ts:
--------------------------------------------------------------------------------
1 | describe('blah', () => {
2 | it('works', () => {
3 | expect(1).toEqual(1);
4 | });
5 | });
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
3 | "include": ["src", "types"],
4 | "compilerOptions": {
5 | "module": "ESNext",
6 | "lib": ["dom", "ESNext"],
7 | "importHelpers": true,
8 | // output .d.ts declaration files for consumers
9 | "declaration": true,
10 | // output .js.map sourcemap files for consumers
11 | "sourceMap": true,
12 | // match output dir to input dir. e.g. dist/index instead of dist/src/index
13 | "rootDir": "./src",
14 | // stricter type-checking for stronger correctness. Recommended by TS
15 | "strict": true,
16 | // linter checks for common issues
17 | "noImplicitReturns": true,
18 | "noFallthroughCasesInSwitch": true,
19 | "strictPropertyInitialization": false,
20 | // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
21 | "noUnusedLocals": true,
22 | "noUnusedParameters": true,
23 | // use Node's module resolution algorithm, instead of the legacy TS one
24 | "moduleResolution": "node",
25 | // interop between ESM and CJS modules. Recommended by TS
26 | "esModuleInterop": true,
27 | // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
28 | "skipLibCheck": true,
29 | // error out if import and file system have a casing mismatch. Recommended by TS
30 | "forceConsistentCasingInFileNames": true,
31 | // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
32 | "noEmit": true,
33 |
34 | "target": "ESNext",
35 | "noImplicitAny": false,
36 | "allowJs": true,
37 | "checkJs": false,
38 | "removeComments": true,
39 | // "emitDeclarationOnly": true,
40 | // "allowSyntheticDefaultImports": true,
41 |
42 | // "declarationMap": true,
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/tsdx.config.js:
--------------------------------------------------------------------------------
1 | const scss = require('rollup-plugin-scss');
2 | const fg = require('fast-glob');
3 |
4 | function scssWatchPlugin(options = {}) {
5 | return {
6 | name: 'scss-watch',
7 | async transform(code, id) {
8 | if (!id.includes('/rdf-form.scss')) return
9 |
10 | const files = await fg('./src/scss/**/*');
11 | const dependencies = files.filter(file => file !== './scss/rdf-form.scss')
12 | .map(dep => dep.replace('src/scss/', ''))
13 |
14 | return { code, dependencies, map: { mappings: '' } }
15 | }
16 | };
17 | }
18 |
19 |
20 | module.exports = {
21 | rollup: function (config, options) {
22 | config.plugins.push(scss({ output: false }));
23 | config.plugins.push(scssWatchPlugin())
24 | return config;
25 | },
26 | };
--------------------------------------------------------------------------------