lightview 1.8.1-b → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (224) hide show
  1. package/.agent/workflows/daisyui-component-migration.md +155 -0
  2. package/.codacy/cli.sh +149 -0
  3. package/.codacy/codacy.yaml +15 -0
  4. package/.github/instructions/codacy.instructions.md +72 -0
  5. package/.wranglerignore +21 -0
  6. package/README.md +1331 -21
  7. package/_headers +4 -0
  8. package/build.js +70 -0
  9. package/components/actions/button.js +151 -0
  10. package/components/actions/dropdown.js +120 -0
  11. package/components/actions/modal.js +146 -0
  12. package/components/actions/swap.js +118 -0
  13. package/components/daisyui.js +288 -0
  14. package/components/data-display/accordion.js +128 -0
  15. package/components/data-display/alert.js +112 -0
  16. package/components/data-display/avatar.js +170 -0
  17. package/components/data-display/badge.js +82 -0
  18. package/components/data-display/card.js +151 -0
  19. package/components/data-display/carousel.js +94 -0
  20. package/components/data-display/chart.js +220 -0
  21. package/components/data-display/chat.js +128 -0
  22. package/components/data-display/collapse.js +103 -0
  23. package/components/data-display/countdown.js +69 -0
  24. package/components/data-display/diff.js +111 -0
  25. package/components/data-display/kbd.js +65 -0
  26. package/components/data-display/loading.js +75 -0
  27. package/components/data-display/progress.js +79 -0
  28. package/components/data-display/radial-progress.js +88 -0
  29. package/components/data-display/skeleton.js +66 -0
  30. package/components/data-display/stats.js +159 -0
  31. package/components/data-display/table.js +146 -0
  32. package/components/data-display/timeline.js +146 -0
  33. package/components/data-display/toast.js +72 -0
  34. package/components/data-display/tooltip.js +74 -0
  35. package/components/data-input/checkbox.js +253 -0
  36. package/components/data-input/file-input.js +224 -0
  37. package/components/data-input/input.js +264 -0
  38. package/components/data-input/radio.js +338 -0
  39. package/components/data-input/range.js +204 -0
  40. package/components/data-input/rating.js +219 -0
  41. package/components/data-input/select.js +287 -0
  42. package/components/data-input/textarea.js +287 -0
  43. package/components/data-input/toggle.js +201 -0
  44. package/components/index.js +137 -0
  45. package/components/layout/divider.js +72 -0
  46. package/components/layout/drawer.js +142 -0
  47. package/components/layout/footer.js +100 -0
  48. package/components/layout/hero.js +109 -0
  49. package/components/layout/indicator.js +90 -0
  50. package/components/layout/join.js +78 -0
  51. package/components/layout/navbar.js +110 -0
  52. package/components/navigation/breadcrumbs.js +91 -0
  53. package/components/navigation/dock.js +103 -0
  54. package/components/navigation/menu.js +126 -0
  55. package/components/navigation/pagination.js +105 -0
  56. package/components/navigation/steps.js +89 -0
  57. package/components/navigation/tabs.css +177 -0
  58. package/components/navigation/tabs.js +123 -0
  59. package/components/theme/theme-switch.css +65 -0
  60. package/components/theme/theme-switch.js +177 -0
  61. package/docs/about.html +164 -0
  62. package/docs/api/computed.html +184 -0
  63. package/docs/api/effects.html +173 -0
  64. package/docs/api/elements.html +180 -0
  65. package/docs/api/enhance.html +225 -0
  66. package/docs/api/hypermedia.html +165 -0
  67. package/docs/api/index.html +178 -0
  68. package/docs/api/nav.html +18 -0
  69. package/docs/api/signals.html +136 -0
  70. package/docs/api/state.html +217 -0
  71. package/docs/assets/images/logo-favicon.svg +42 -0
  72. package/docs/assets/images/logo-static.svg +40 -0
  73. package/docs/assets/images/logo.svg +66 -0
  74. package/docs/assets/js/examplify.js +395 -0
  75. package/docs/assets/styles/site.css +1102 -0
  76. package/docs/assets/styles/themes.css +236 -0
  77. package/docs/components/accordion.html +439 -0
  78. package/docs/components/alert.html +528 -0
  79. package/docs/components/avatar.html +586 -0
  80. package/docs/components/badge.html +531 -0
  81. package/docs/components/breadcrumbs.html +278 -0
  82. package/docs/components/button.html +579 -0
  83. package/docs/components/card.html +561 -0
  84. package/docs/components/carousel.html +286 -0
  85. package/docs/components/chart-area.html +702 -0
  86. package/docs/components/chart-bar.html +782 -0
  87. package/docs/components/chart-column.html +735 -0
  88. package/docs/components/chart-line.html +794 -0
  89. package/docs/components/chart-pie.html +823 -0
  90. package/docs/components/chart.html +612 -0
  91. package/docs/components/chat.html +547 -0
  92. package/docs/components/checkbox.html +641 -0
  93. package/docs/components/collapse.html +536 -0
  94. package/docs/components/component-nav.html +53 -0
  95. package/docs/components/countdown.html +470 -0
  96. package/docs/components/diff.html +245 -0
  97. package/docs/components/divider.html +240 -0
  98. package/docs/components/dock.html +277 -0
  99. package/docs/components/drawer.html +515 -0
  100. package/docs/components/dropdown.html +479 -0
  101. package/docs/components/file-input.html +591 -0
  102. package/docs/components/footer.html +301 -0
  103. package/docs/components/gallery.html +504 -0
  104. package/docs/components/hero.html +264 -0
  105. package/docs/components/index.css +840 -0
  106. package/docs/components/index.html +735 -0
  107. package/docs/components/indicator.html +342 -0
  108. package/docs/components/input.html +644 -0
  109. package/docs/components/join.html +285 -0
  110. package/docs/components/kbd.html +322 -0
  111. package/docs/components/loading.html +521 -0
  112. package/docs/components/menu.html +461 -0
  113. package/docs/components/modal.html +639 -0
  114. package/docs/components/navbar.html +321 -0
  115. package/docs/components/pagination.html +279 -0
  116. package/docs/components/progress.html +514 -0
  117. package/docs/components/radial-progress.html +434 -0
  118. package/docs/components/radio.html +655 -0
  119. package/docs/components/range.html +611 -0
  120. package/docs/components/rating.html +642 -0
  121. package/docs/components/select.html +696 -0
  122. package/docs/components/sidebar-setup.js +93 -0
  123. package/docs/components/skeleton.html +447 -0
  124. package/docs/components/spinner.html +68 -0
  125. package/docs/components/stats.html +486 -0
  126. package/docs/components/steps.html +356 -0
  127. package/docs/components/swap.html +517 -0
  128. package/docs/components/switch.html +68 -0
  129. package/docs/components/table.html +668 -0
  130. package/docs/components/tabs.html +506 -0
  131. package/docs/components/text-input.html +68 -0
  132. package/docs/components/textarea.html +603 -0
  133. package/docs/components/timeline.html +487 -0
  134. package/docs/components/toast.html +474 -0
  135. package/docs/components/toggle.html +564 -0
  136. package/docs/components/tooltip.html +423 -0
  137. package/docs/examples/getting-started-example.html +40 -0
  138. package/docs/examples/index.html +93 -0
  139. package/docs/getting-started/index.html +739 -0
  140. package/docs/getting-started/reviews.html +23 -0
  141. package/docs/getting-started/reviews.odom +108 -0
  142. package/docs/getting-started/reviews.vdom +84 -0
  143. package/docs/index.html +134 -0
  144. package/docs/playground.html +416 -0
  145. package/docs/router.html +285 -0
  146. package/docs/styles/index.html +190 -0
  147. package/functions/_middleware.js +32 -0
  148. package/index.html +309 -0
  149. package/lightview-router.js +364 -0
  150. package/lightview-x.js +1577 -0
  151. package/lightview.js +658 -1109
  152. package/lightview.js.backup +793 -0
  153. package/middleware/locale.js +25 -0
  154. package/middleware/markdown.js +44 -0
  155. package/middleware/notFound.js +37 -0
  156. package/package.json +27 -41
  157. package/watch.js +92 -0
  158. package/wrangler.toml +12 -0
  159. package/.idea/lightview.iml +0 -12
  160. package/.idea/modules.xml +0 -8
  161. package/.idea/vcs.xml +0 -6
  162. package/LICENSE +0 -21
  163. package/codepen-no-tabs-embed.css +0 -2
  164. package/components/chart/chart.html +0 -17
  165. package/components/chart/example.html +0 -32
  166. package/components/chart.html +0 -83
  167. package/components/components.js +0 -113
  168. package/components/gantt/example.html +0 -22
  169. package/components/gantt/gantt.html +0 -42
  170. package/components/gauge/example.html +0 -28
  171. package/components/gauge/gauge.html +0 -20
  172. package/components/gauge.html +0 -60
  173. package/components/orgchart/example.html +0 -25
  174. package/components/orgchart/orgchart.html +0 -41
  175. package/components/repl/code-editor.html +0 -64
  176. package/components/repl/editor.html +0 -37
  177. package/components/repl/editorjs-inline-tool/index.js +0 -3
  178. package/components/repl/editorjs-inline-tool/inline-tools.js +0 -28
  179. package/components/repl/editorjs-inline-tool/tool.js +0 -175
  180. package/components/repl/repl-with-wysiwyg.html +0 -355
  181. package/components/repl/repl.html +0 -345
  182. package/components/repl/sup.js +0 -44
  183. package/components/repl/wysiwyg-repl.html +0 -258
  184. package/components/timeline/example.html +0 -33
  185. package/components/timeline/timeline.html +0 -44
  186. package/components/timeline.html +0 -81
  187. package/examples/anchor.html +0 -11
  188. package/examples/chart.html +0 -34
  189. package/examples/counter.html +0 -26
  190. package/examples/counter.test.mjs +0 -47
  191. package/examples/counter2.html +0 -26
  192. package/examples/directives.html +0 -79
  193. package/examples/foreign.html +0 -50
  194. package/examples/forgeinform.html +0 -98
  195. package/examples/form.html +0 -61
  196. package/examples/gauge.html +0 -18
  197. package/examples/invalid-template-literals.html +0 -44
  198. package/examples/medium/remote.html +0 -60
  199. package/examples/message.html +0 -18
  200. package/examples/nested.html +0 -11
  201. package/examples/object-bound-form.html +0 -34
  202. package/examples/remote-server.js +0 -51
  203. package/examples/remote.html +0 -34
  204. package/examples/remote.json +0 -1
  205. package/examples/scratch.html +0 -69
  206. package/examples/sensors/index.html +0 -30
  207. package/examples/sensors/sensor-server.js +0 -30
  208. package/examples/shared.html +0 -41
  209. package/examples/template.html +0 -33
  210. package/examples/timeline.html +0 -21
  211. package/examples/todo.html +0 -38
  212. package/examples/top.html +0 -10
  213. package/examples/types.html +0 -94
  214. package/examples/xor.html +0 -62
  215. package/jest-puppeteer.config.js +0 -5
  216. package/jest.config.json +0 -12
  217. package/sites/client.html +0 -48
  218. package/sites/index.html +0 -247
  219. package/test/basic.html +0 -93
  220. package/test/basic.test.mjs +0 -315
  221. package/test/extended.html +0 -29
  222. package/test/extended.test.mjs +0 -448
  223. package/types.js +0 -534
  224. package/unsplash.key +0 -1
package/components/repl/repl.html DELETED
@@ -1,345 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Sites</title>
6
- <script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
7
- <script src="https://unpkg.com/isomorphic-git"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
- <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
13
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script>
14
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
15
- <script src="https://cdn.jsdelivr.net/npm/editorjs-tooltip@1.1.3/dist/bundle.min.js"></script>
16
- <script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image@1.1.0/dist/bundle.min.js"></script>
17
- <script src="https://cdn.jsdelivr.net/npm/@rodrigoodhin/editorjs-image-gallery@0.1.0/dist/bundle.min.js"></script>
18
- <script src="https://cdn.jsdelivr.net/npm/editorjs-header-with-anchor@2.6.0/dist/bundle.min.js"></script>
19
- <script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script>
20
- <script src="https://cdn.jsdelivr.net/npm/@calumk/editorjs-codeflask@1.0.9/dist/editorjs-codeflask.bundle.min.js"></script>
21
- <script src="https://cdn.jsdelivr.net/npm/editorjs-github-gist-plugin@1.1.0/dist/main.min.js"></script>
22
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
23
- <template id="repl">
24
-
25
- <div id="content" style="flex:auto;min-height:100%;width:750px;max-width:750px;height:100%;border:1px solid;padding:10px;margin:0 auto">
26
- <div style="display:flex;flex-direction:column;">
27
- <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;text-align:center">
28
- <span style="padding-right:10px"><label for="headhtml" l-on:click="${onTabClick}">HTML Head</label><input for="headhtml" value="${headhtmlPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
29
- <span style="padding-right:10px"><label for="bodyhtml" l-on:click="${onTabClick}">HTML Body</label><input for="bodyhtml" value="${bodyhtmlPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
30
- <!--span style="padding-right:10px"><label for="markdown" l-on:click="${onTabClick}">Markdown (Body)</label><input for="markdown" value="${markdownPinned}" type="checkbox" l-on:click="${onPinClick}"></span-->
31
- <span style="padding-right:10px"><label for="css" l-on:click="${onTabClick}">Style</label><input for="css" value="${cssPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
32
- <span style="padding-right:10px"><label for="script" l-on:click="${onTabClick}">Script</label><input for="script" value="${scriptPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
33
- <span style="padding-right:10px"><label for="preview" l-on:click="${onTabClick}">Preview</label><input for="preview" value="${previewPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
34
- </div>
35
- </div>
36
- <textarea id="headhtml" style="height:200px;max-width:99%;width:99%;margin-right:2px;display:none">${headhtml}</textarea>
37
- <textarea id="bodyhtml" style="height:200px;max-width:99%;width:99%;margin-right:2px;">${bodyhtml}</textarea>
38
- <!--textarea id="markdown" style="height:200px;max-width:99%;width:99%;margin-right:2px;display:none">${markdown}</textarea-->
39
- <textarea id="css" style="height:200px;max-width:99%;width:99%;margin-right:2px;display:none">${cssText}</textarea>
40
- <textarea id="script" style="height:200px;max-width:99%;width:99%;margin-right:2px;display:none">${scriptText}</textarea>
41
- <div id="preview" style="max-width:99%;width:99%;margin-right:2px;display:none"></div>
42
- </div>
43
- <div style="width:100%;text-align:center">
44
- <div style="padding:5px">${source}</div>
45
- <button l-on:click="${doSave}">Save</button>&nbsp;&nbsp;
46
- <button l-if="${!source.trim().startsWith('http')}" l-on:click="${doReset}">Reset</button>
47
- </div>
48
- <style id="style">
49
- label:hover {
50
- text-decoration: underline
51
- }
52
- </style>
53
- <script type="lightview/module">
54
- const turndownService = new TurndownService({headingStyle:"atx",codeBlockStyle:"fenced",emDelimiter:"*"});
55
- turndownService.keep(() => true);
56
-
57
- const {html,css,script} = await import("../../types.js");
58
- self.variables({
59
- onTabClick:"function",
60
- onPinClick:"function",
61
- doSave: "function",
62
- doReset:"function"
63
- });
64
- self.variables({
65
- wysiwygPinned:"boolean",
66
- bodyhtmlPinned:"boolean",
67
- bodyhtml:html,
68
- markdownPinned:"boolean",
69
- markdown:"string",
70
- cssPinned:"boolean",
71
- cssText:css,
72
- scriptPinned:"boolean",
73
- scriptText:script,
74
- headhtmlPinned:"boolean",
75
- headhtml:html,
76
- previewPinned:"boolean",
77
- source:"string",
78
- },{reactive});
79
- self.variables({
80
- src:"string",
81
- },{imported});
82
-
83
- bodyhtmlPinned = true;
84
-
85
- const loadFromFile = async () => {
86
- const html = await fs.readFile(url.pathname,{encoding:"utf8"});
87
- source = `IndexedDB://${url.hostname+"_repl"}${url.pathname}`;
88
- return html;
89
- };
90
-
91
- const loadFromServer = async () => {
92
- const response = await fetch(url.href);
93
- const html = await response.text();
94
- source = url.href;
95
- return html;
96
- };
97
-
98
- const parseFullHTML = (fullHTML) => {
99
- const parser = new DOMParser(),
100
- fragment = parser.parseFromString(fullHTML,"text/html"),
101
- body_el = fragment?.querySelector("body"),
102
- style_el = fragment?.querySelector("style"),
103
- script_el = body_el?.querySelector("script");
104
- if(style_el) {
105
- cssText = style_el?.innerHTML;
106
- style_el.remove();
107
- } else {
108
- cssText = "";
109
- }
110
- if(script_el) {
111
- scriptText = script_el?.innerHTML,
112
- script_el.remove();
113
- } else {
114
- scriptText = "";
115
- }
116
- headhtml = fragment?.head.innerHTML || "";
117
- bodyhtml = body_el?.innerHTML;
118
- };
119
-
120
- let fs,
121
- url;
122
- if(src) {
123
- url = new URL(src,window.location.href);
124
- fs = new LightningFS(url.hostname+"_repl").promises;
125
- try {
126
- parseFullHTML(await loadFromFile());
127
- } catch(e) {
128
- try {
129
- parseFullHTML(await loadFromServer());
130
- } catch(e) {
131
- fullHTML = e.message;
132
- }
133
- }
134
- } else {
135
- url = new URL(window.location.href);
136
- fs = new LightningFS(url.hostname+"_repl").promises;
137
- bodyhtml = "";
138
- headhtml = "";
139
- scriptText = "";
140
- cssText = "";
141
- };
142
-
143
- // initialize variables
144
- markdown = "";
145
-
146
- const tabs = [...self.querySelectorAll("label[for]")]
147
- .map((label) => {
148
- const id = label.getAttribute("for");
149
- return [id,self.getElementById(id),label];
150
- });
151
-
152
- const showTab = (targetid) => {
153
- tabs.forEach(([id,el,label]) => {
154
- if(id===targetid || self.varsProxy[`${id}Pinned`]) {
155
- el.style.display = "unset";
156
- } else if(!self.varsProxy[`${id}Pinned`]) {
157
- el.style.display = "none";
158
- }
159
- });
160
- };
161
-
162
- const hideTab = (targetid) => {
163
- tabs.forEach(([id,el,label]) => {
164
- if(id===targetid) el.style.display = "none";
165
- });
166
- };
167
-
168
- onTabClick = (event) => {
169
- showTab(event.target.getAttribute("for"));
170
- };
171
-
172
- onPinClick = (event) => {
173
- const id = event.target.getAttribute("for"),
174
- checked = self.varsProxy[`${id}Pinned`] = event.target.checked;
175
- if(checked) onTabClick(event);
176
- else hideTab(id);
177
- };
178
-
179
- doSave = async () => {
180
- const parts = url.pathname.split("/");
181
- let dir = "";
182
- parts.shift();parts.pop();
183
- for(const part of parts) {
184
- dir = dir + "/" + part;
185
- try {
186
- await fs.mkdir(dir);
187
- } catch(e) {
188
- if(e.message==="EEXIST") break;
189
- throw e;
190
- }
191
- }
192
- fs.writeFile(url.pathname,doPreview(),{encoding:"utf8"},()=>{});
193
- source = `IndexedDB://${url.hostname+"_repl"}${url.pathname}`;
194
- };
195
-
196
- doReset = async () => {
197
- try {
198
- await fs.unlink(url.pathname);
199
- } catch(e) {
200
-
201
- }
202
- if(src) {
203
- try {
204
- parseFullHTML(await loadFromServer());
205
- doPreview();
206
- } catch(e) {
207
- previewEl.innerHTML = fullHTML = e.message;
208
- }
209
- } else {
210
- bodyhtml = "";
211
- headhtml = "";
212
- scriptText = "";
213
- cssText = "";
214
- previewEl.innerHTML = "";
215
- }
216
- };
217
-
218
- const doPreview = () => {
219
- // not quite write, createComponent needs to be reworked to handle a head and import its links
220
- const template = document.createElement("template");
221
- template.innerHTML = bodyhtmlEl.value + "<style>" + cssText + "</style>" + '<script type="lightview/module">' + scriptText + "<" + "/script>";
222
- const component = window.customElements.get("x-preview");
223
- if(component) { component.setTemplateNode(template); }
224
- else { Lightview.createComponent("x-preview",template); }
225
- previewEl.innerHTML = "<x-preview></x-preview>";
226
- return "<html><head>"+headhtml+"</head><body>"+template.innerHTML+"<body></html>"
227
- };
228
-
229
- const wysywigEl = self.getElementById("wysiwyg"),
230
- markdownEl = self.getElementById("markdown"),
231
- bodyhtmlEl = self.getElementById("bodyhtml"),
232
- headhtmlEl = self.getElementById("headhtml"),
233
- tabsEl = self.getElementById("tabs"),
234
- styleEl = self.getElementById("style"),
235
- previewEl = self.getElementById("preview");
236
-
237
- let prevmarkdown; // prevents indirect recursion
238
- observe(() => {
239
- const text = turndownService.turndown(bodyhtml).trim();
240
- if(text && text!==prevtext) {
241
- markdown = markdownEl.innerHTML = prevmarkdown = text;
242
- }
243
- });
244
-
245
- let prevbodyhtml; // prevents indirect recursion
246
- observe(() => {
247
- const html = marked.parse(markdown).trim();
248
- if(html && html!==prevbodyhtml) {
249
- bodyhtml = bodyhtmlEl.innerText = prevbodyhtml = html;
250
- }
251
- });
252
-
253
- const initEditor = () => {
254
-
255
- };
256
-
257
- self.addEventListener("connected",() => {
258
- initEditor();
259
- doPreview();
260
- });
261
- </script>
262
- </template>
263
- <script src="../../lightview.js"></script>
264
- </head>
265
- <body style="min-height:95vh;">
266
- <script>Lightview.createComponent("l-repl", document.getElementById("repl"));</script>
267
- <l-repl style="min-height:95vh" src="../../examples/counter.html"><div id="editor" slot="editor" style="border:solid 1px;max-height:95vh;overflow:auto;margin-bottom:5px;padding-left:10px;"></div></l-repl>
268
- <script type="module">
269
- //import {Sup} from "./sup.js";
270
- import createGenericInlineTool,{ItalicInlineTool, UnderlineInlineTool, StrongInlineTool} from "./editorjs-inline-tool/index.js";
271
- const editor = new EditorJS({
272
- /**
273
- * Id of Element that should contain the Editor
274
- */
275
- holder: "editor",
276
-
277
- /**
278
- * Available Tools list.
279
- * Pass Tool's class or Settings object for each Tool you want to use
280
- */
281
- tools: {
282
- header: Header,
283
- list: List,
284
- table: Table,
285
- embed: Embed,
286
- linkWithPreview: LinkTool,
287
- image: {
288
- class: InlineImage,
289
- inlineToolbar: true,
290
- config: {
291
- embed: {
292
- display: true,
293
- },
294
- unsplash: {
295
- appName: 'Lightview',
296
- clientId: 'nRe-dHABvjv2shxyvDFQd3Y9MPni77qBG9ImAVH0wig'
297
- }
298
- }
299
- },
300
- imageGallery: ImageGallery,
301
- sup: {
302
- class: createGenericInlineTool({
303
- sanitize: { sup: {} },
304
- shortcut: "CMD+^",
305
- tagName:"SUP",
306
- toolboxIcon: '<i class="fa fa-superscript"></i>'
307
- })
308
- },
309
- sub: {
310
- class: createGenericInlineTool({
311
- sanitize: { sub: {} },
312
- shortcut: "CMD+SHIFT+^",
313
- tagName:"SUB",
314
- toolboxIcon: '<i class="fa fa-subscript"></i>'
315
- })
316
- },
317
- code: {
318
- class: createGenericInlineTool({
319
- sanitize: { code: {} },
320
- tagName:"CODE",
321
- toolboxIcon: '<i class="fa fa-code"></i>'
322
- })
323
- },
324
- gist: Gist,
325
- precode: editorjsCodeflask,
326
- i: ItalicInlineTool,
327
- u: UnderlineInlineTool,
328
- tooltip: {
329
- class: Tooltip,
330
- config: {
331
- location: 'left',
332
- highlightColor: '#FFEFD5',
333
- underline: true,
334
- backgroundColor: '#154360',
335
- textColor: '#FDFEFE',
336
- holder: 'editor',
337
- }
338
- }
339
- //strong: StrongInlineTool, redundant with bold, which really needs to be replaced
340
- // https://github.com/hata6502/editorjs-style use as a base for input fields editor
341
- },
342
- })
343
- </script>
344
- </body>
345
- </html>
package/components/repl/sup.js DELETED
@@ -1,44 +0,0 @@
1
- class Sup {
2
- static get isInline() {
3
- return true;
4
- }
5
- static get title() {
6
- return "Supercase";
7
- }
8
-
9
- constructor({api}) {
10
- this.api = api;
11
- this.button = null;
12
- }
13
-
14
- render() {
15
- this.button = document.createElement('button');
16
- this.button.type = 'button';
17
- this.button.textContent = '&sup2;';
18
- this.button.classList.add(this.api.styles.inlineToolButton);
19
- return this.button;
20
- }
21
-
22
- surround(range) {
23
- if (this.state) {
24
- return;
25
- }
26
- const selectedText = range.extractContents();
27
- const sup = document.createElement('SUP');
28
-
29
- sup.appendChild(selectedText);
30
- range.insertNode(sup);
31
-
32
- this.api.selection.expandToTag(sup);
33
- }
34
-
35
- checkState(selection) {
36
- const text = selection.anchorNode;
37
- if (!text) {
38
- return;
39
- }
40
- this.state = true;
41
- }
42
- }
43
-
44
- export {Sup, Sup as default}
package/components/repl/wysiwyg-repl.html DELETED
@@ -1,258 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Sites</title>
6
- <script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
7
- <script src="https://unpkg.com/isomorphic-git"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
- <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/codeflask@1.4.1/build/codeflask.min.js" integrity="sha256-YdO3p9WDoWX5KYPzdxjQKrxt5QhTVqohfcTdrRQiB8w=" crossorigin="anonymous"></script>
11
- <script src="https://cdn.jsdelivr.net/npm/@calumk/editorjs-codeflask@1.0.9/dist/editorjs-codeflask.bundle.min.js"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/editorjs-github-gist-plugin@1.1.0/dist/main.min.js"></script>
13
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
14
- <template id="repl">
15
- <div id="content" style="min-height:100%;width:750px;max-width:750px;height:100%;border:1px solid;padding:10px;margin:0 auto">
16
- <div style="display:flex;flex-direction:column;">
17
- <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;text-align:center">
18
- <span style="padding-right:10px"><label for="headhtml" l-on:click="${onTabClick}">HTML Head</label><input for="headhtml" value="${headhtmlPinned}" type="checkbox" l-on:click="${onPinClick}"></span>
19
- <span style="padding-right:10px"><label for="bodyhtml" l-on:click="${onTabClick}">HTML Body</label><input for="bodyhtml" value="${bodyhtmlPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
20
- <span style="padding-right:10px"><label for="csstext" l-on:click="${onTabClick}">Style</label><input for="csstext" value="${csstextPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
21
- <span style="padding-right:10px"><label for="scripttext" l-on:click="${onTabClick}">Script</label><input for="scripttext" value="${scripttextinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
22
- <span style="padding-right:10px"><label for="preview" l-on:click="${onTabClick}">Preview</label><input for="preview" value="${previewPinned}" type="checkbox" l-on:click="${onPinClick}" checked></span>
23
- </div>
24
- </div>
25
- <div id="headhtml" style="display:inline-block;border:solid 1px;height:200px;width:750px;max-height:85vh;max-width:740px;overflow:auto;margin-bottom:5px;padding-left:10px;"></div>
26
- <div id="bodyhtml" style="display:inline-block;border:solid 1px;height:200px;width:750px;max-height:85vh;max-width:740px;overflow:auto;margin-bottom:5px;padding-left:10px;"></div>
27
- <div id="csstext" style="display:inline-block;border:solid 1px;height:200px;width:260px;max-height:85vh;max-width:740px;overflow:auto;margin-bottom:5px;padding-left:10px;"></div>
28
- <div id="scripttext" style="display:inline-block;border:solid 1px;height:200px;width:460px;max-height:85vh;max-width:740px;overflow:auto;margin-bottom:5px;padding-left:10px;"></div>
29
- <div id="preview" style="display:inline-block;border:1px solid;resize:both;height:200px;max-width:100%;width:100%;"></div>
30
- </div>
31
- <div style="width:100%;text-align:center">
32
- <div style="padding:5px">${source}</div>
33
- <button l-on:click="${doSave}">Save</button>&nbsp;&nbsp;
34
- <button l-if="${!source.trim().startsWith('http')}" l-on:click="${doReset}">Reset</button>
35
- </div>
36
- <style id="style">
37
- label:hover {
38
- text-decoration: underline
39
- }
40
- </style>
41
- <script type="lightview/module">
42
- const turndownService = new TurndownService({headingStyle:"atx",codeBlockStyle:"fenced",emDelimiter:"*"});
43
- turndownService.keep(() => true);
44
-
45
- const {html,css,script} = await import("../../types.js");
46
- self.variables({
47
- onTabClick:"function",
48
- onPinClick:"function",
49
- doSave: "function",
50
- doReset:"function"
51
- });
52
- self.variables({
53
- wysiwygPinned:"boolean",
54
- bodyhtmlPinned:"boolean",
55
- bodyhtml:html,
56
- markdownPinned:"boolean",
57
- markdown:html,
58
- csstextPinned:"boolean",
59
- csstext:css,
60
- scripttextPinned:"boolean",
61
- scripttext:script,
62
- headhtmlPinned:"boolean",
63
- headhtml:html,
64
- previewPinned:"boolean",
65
- source:"string",
66
- },{reactive});
67
- self.variables({
68
- src:"string",
69
- },{imported});
70
-
71
- bodyhtmlPinned = true;
72
- csstextPinned = true;
73
- scripttextPinned = true;
74
- previewPinned = true;
75
-
76
- const loadFromFile = async () => {
77
- const html = await fs.readFile(url.pathname,{encoding:"utf8"});
78
- source = `IndexedDB://${url.hostname+"_repl"}${url.pathname}`;
79
- return html;
80
- };
81
-
82
- const loadFromServer = async () => {
83
- const response = await fetch(url.href);
84
- const html = await response.text();
85
- source = url.href;
86
- return html;
87
- };
88
-
89
- const parseFullHTML = (fullHTML) => {
90
- const parser = new DOMParser(),
91
- fragment = parser.parseFromString(fullHTML,"text/html"),
92
- body_el = fragment?.querySelector("body"),
93
- style_el = fragment?.querySelector("style"),
94
- script_el = body_el?.querySelector("script");
95
- if(style_el) {
96
- csstext = style_el?.innerHTML;
97
- style_el.remove();
98
- } else {
99
- csstext = "";
100
- }
101
- if(script_el) {
102
- scripttext = script_el?.innerHTML,
103
- script_el.remove();
104
- } else {
105
- scripttext = "";
106
- }
107
- headhtml = fragment?.head.innerHTML || "";
108
- bodyhtml = body_el?.innerHTML;
109
- };
110
-
111
- let fs,
112
- url;
113
- if(src) {
114
- url = new URL(src,window.location.href);
115
- fs = new LightningFS(url.hostname+"_repl").promises;
116
- try {
117
- parseFullHTML(await loadFromFile());
118
- } catch(e) {
119
- try {
120
- parseFullHTML(await loadFromServer());
121
- } catch(e) {
122
- fullHTML = e.message;
123
- }
124
- }
125
- } else {
126
- url = new URL(window.location.href);
127
- fs = new LightningFS(url.hostname+"_repl").promises;
128
- bodyhtml = "";
129
- headhtml = "";
130
- scripttext = "";
131
- csstext = "";
132
- };
133
-
134
- // initialize variables
135
- markdown = "";
136
-
137
- const tabs = [...self.querySelectorAll("label[for]")]
138
- .map((label) => {
139
- const id = label.getAttribute("for");
140
- return [id,self.getElementById(id),label];
141
- });
142
-
143
- const showTab = (targetid) => {
144
- tabs.forEach(([id,el,label]) => {
145
- if(id===targetid || self.varsProxy[`${id}Pinned`]) {
146
- el.style.display = "unset";
147
- } else if(!self.varsProxy[`${id}Pinned`]) {
148
- el.style.display = "none";
149
- }
150
- });
151
- };
152
-
153
- const hideTab = (targetid) => {
154
- tabs.forEach(([id,el,label]) => {
155
- if(id===targetid) el.style.display = "none";
156
- });
157
- };
158
-
159
- onTabClick = (event) => {
160
- showTab(event.target.getAttribute("for"));
161
- };
162
-
163
- onPinClick = (event) => {
164
- const id = event.target.getAttribute("for"),
165
- checked = self.varsProxy[`${id}Pinned`] = event.target.checked;
166
- if(checked) onTabClick(event);
167
- else hideTab(id);
168
- };
169
-
170
- doSave = async () => {
171
- const parts = url.pathname.split("/");
172
- let dir = "";
173
- parts.shift();parts.pop();
174
- for(const part of parts) {
175
- dir = dir + "/" + part;
176
- try {
177
- await fs.mkdir(dir);
178
- } catch(e) {
179
- if(e.message==="EEXIST") break;
180
- throw e;
181
- }
182
- }
183
- fs.writeFile(url.pathname,doPreview(),{encoding:"utf8"},()=>{});
184
- source = `IndexedDB://${url.hostname+"_repl"}${url.pathname}`;
185
- };
186
-
187
- doReset = async () => {
188
- try {
189
- await fs.unlink(url.pathname);
190
- } catch(e) {
191
-
192
- }
193
- if(src) {
194
- try {
195
- parseFullHTML(await loadFromServer());
196
- doPreview();
197
- } catch(e) {
198
- previewEl.innerHTML = fullHTML = e.message;
199
- }
200
- } else {
201
- bodyhtml = "";
202
- headhtml = "";
203
- scripttext = "";
204
- csstext = "";
205
- previewEl.innerHTML = "";
206
- }
207
- };
208
-
209
- const doPreview = () => {
210
- // not quite write, createComponent needs to be reworked to handle a head and import its links
211
- const template = document.createElement("template");
212
- template.innerHTML = bodyhtmlEl.value + "<style>" + csstext + "</style>" + '<script type="lightview/module">' + scripttext + "<" + "/script>";
213
- const component = window.customElements.get("x-preview");
214
- if(component) { component.setTemplateNode(template); }
215
- else { Lightview.createComponent("x-preview",template); }
216
- previewEl.innerHTML = "<x-preview></x-preview>";
217
- return "<html><head>"+headhtml+"</head><body>"+template.innerHTML+"<body></html>"
218
- };
219
-
220
- const bodyhtmlEl = self.getElementById("bodyhtml"),
221
- headhtmlEl = self.getElementById("headhtml"),
222
- tabsEl = self.getElementById("tabs"),
223
- csstextEl = self.getElementById("csstext"),
224
- scripttextEl = self.getElementById("scripttext"),
225
- previewEl = self.getElementById("preview");
226
-
227
- const initEditors = () => {
228
- [["headhtml",headhtmlEl,"html"],["bodyhtml",bodyhtmlEl,"html"],["csstext",csstextEl,"css"],[ "scripttext",scripttextEl,"js"]].forEach(([id,target,language]) => {
229
- const flask = new CodeFlask(target, { language,lineNumbers:true });
230
- flask.updateCode(self.vars[id].value);
231
- });
232
- };
233
-
234
- self.addEventListener("connected",() => {
235
- initEditors();
236
- doPreview();
237
- });
238
- </script>
239
- </template>
240
- <script src="../../lightview.js"></script>
241
- </head>
242
- <body style="min-height:95vh;">
243
- <script>Lightview.createComponent("l-repl", document.getElementById("repl"));</script>
244
- <!--l-repl style="min-height:95vh" src="../../examples/counter.html"></l-repl-->
245
- <div id="htmlhead" style="max-width:750px;max-height:500px;height:500px;border:1px solid;resize:both" ></div>
246
- <div id="htmlbody" style="max-width:750px;max-height:500px;height:500px;border:1px solid;resize:both" ></div>
247
- <script>
248
- new CodeFlask('#htmlhead', {
249
- language: 'html',
250
- lineNumbers: true
251
- });
252
- new CodeFlask('#htmlbody', {
253
- language: 'html',
254
- lineNumbers: true
255
- });
256
- </script>
257
- </body>
258
- </html>