lightview 1.8.1-b → 1.8.2

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 (126) hide show
  1. package/README.md +15 -16
  2. package/docs/CNAME +1 -0
  3. package/docs/api.html +674 -0
  4. package/docs/blank.html +10 -0
  5. package/docs/comparedto.html +89 -0
  6. package/docs/components/chart-repl.html +69 -0
  7. package/{components/chart → docs/components}/chart.html +2 -2
  8. package/{components → docs/components}/components.js +3 -3
  9. package/docs/components/contents.html +17 -0
  10. package/docs/components/gantt-repl.html +61 -0
  11. package/{components/gantt → docs/components}/gantt.html +3 -3
  12. package/docs/components/gauge-repl.html +66 -0
  13. package/{components/gauge → docs/components}/gauge.html +2 -2
  14. package/docs/components/orgchart-repl.html +64 -0
  15. package/{components/orgchart → docs/components}/orgchart.html +2 -2
  16. package/docs/components/repl-as-src.html +17 -0
  17. package/docs/components/repl-repl.html +95 -0
  18. package/docs/components/repl.html +527 -0
  19. package/docs/components/timeline-repl.html +72 -0
  20. package/{components/timeline → docs/components}/timeline.html +2 -2
  21. package/docs/components.html +14 -0
  22. package/docs/css/highlightjs.min.css +9 -0
  23. package/docs/css/tutorial.css +35 -0
  24. package/docs/examples/anchor.html +11 -0
  25. package/{examples → docs/examples}/chart.html +2 -2
  26. package/{examples → docs/examples}/counter.html +1 -1
  27. package/{examples → docs/examples}/counter.test.mjs +0 -0
  28. package/{examples → docs/examples}/counter2.html +1 -1
  29. package/{examples → docs/examples}/directives.html +1 -1
  30. package/{examples → docs/examples}/foreign.html +1 -1
  31. package/{examples → docs/examples}/forgeinform.html +1 -1
  32. package/{examples → docs/examples}/form.html +1 -1
  33. package/{examples → docs/examples}/gauge.html +2 -2
  34. package/{examples → docs/examples}/invalid-template-literals.html +1 -1
  35. package/{examples → docs/examples}/medium/remote.html +1 -1
  36. package/{examples → docs/examples}/message.html +0 -0
  37. package/{examples → docs/examples}/nested.html +1 -1
  38. package/{examples → docs/examples}/object-bound-form.html +0 -0
  39. package/{examples → docs/examples}/remote-server.js +0 -0
  40. package/{examples → docs/examples}/remote.html +2 -2
  41. package/{examples → docs/examples}/remote.json +0 -0
  42. package/{examples → docs/examples}/scratch.html +1 -1
  43. package/docs/examples/sensors/index.html +44 -0
  44. package/{examples → docs/examples}/sensors/sensor-server.js +0 -0
  45. package/{examples → docs/examples}/shared.html +0 -0
  46. package/{examples → docs/examples}/template.html +1 -1
  47. package/{examples → docs/examples}/timeline.html +2 -2
  48. package/docs/examples/todo.html +40 -0
  49. package/docs/examples/top.html +10 -0
  50. package/{examples → docs/examples}/types.html +1 -1
  51. package/{examples → docs/examples}/xor.html +1 -1
  52. package/docs/examples.html +25 -0
  53. package/docs/index.html +44 -0
  54. package/docs/javascript/codejar.min.js +8 -0
  55. package/docs/javascript/highlightjs.min.js +1173 -0
  56. package/docs/javascript/isomorphic-git.js +9 -0
  57. package/docs/javascript/json5.min.js +1 -0
  58. package/docs/javascript/lightning-fs.js +1 -0
  59. package/docs/javascript/lightview.js +1285 -0
  60. package/docs/javascript/marked.min.js +6 -0
  61. package/docs/javascript/peerjs.min.js +70 -0
  62. package/docs/javascript/turndown.js +973 -0
  63. package/docs/javascript/types.js +606 -0
  64. package/docs/javascript/utils.js +45 -0
  65. package/docs/lightview.html +63 -0
  66. package/docs/old_index.html +965 -0
  67. package/docs/old_index.md +1132 -0
  68. package/docs/slidein.html +51 -0
  69. package/docs/tutorial/0-getting-started.html +67 -0
  70. package/docs/tutorial/1-intro-to-variables.html +103 -0
  71. package/docs/tutorial/10-template-components.html +80 -0
  72. package/docs/tutorial/11-linked-components.html +76 -0
  73. package/docs/tutorial/12-imported-components.html +67 -0
  74. package/docs/tutorial/13-input-binding.html +94 -0
  75. package/docs/tutorial/14-automatic-variable-creation.html +74 -0
  76. package/docs/tutorial/15-form-binding.html +110 -0
  77. package/docs/tutorial/16-if-directive.html +60 -0
  78. package/docs/tutorial/17-loop-directives.html +83 -0
  79. package/docs/tutorial/18-sanitizing-and-escaping-input.html +79 -0
  80. package/docs/tutorial/2-imported-and-exported-variables.html +80 -0
  81. package/docs/tutorial/3-data-types.html +89 -0
  82. package/docs/tutorial/4-extended-data-types.html +83 -0
  83. package/docs/tutorial/5-extended-functional-types.html +96 -0
  84. package/docs/tutorial/5.1-extended-functional-types.html +79 -0
  85. package/docs/tutorial/5.2-extended-functional-types.html +70 -0
  86. package/docs/tutorial/6-conventional-javascript.html +75 -0
  87. package/docs/tutorial/7-monitoring-with-observers.html +107 -0
  88. package/docs/tutorial/8-event-listeners.html +65 -0
  89. package/docs/tutorial/9-intro-to-components.html +91 -0
  90. package/docs/tutorial/contents.html +32 -0
  91. package/docs/tutorial/my-component.html +29 -0
  92. package/docs/tutorial/remote-value.json +4 -0
  93. package/docs/websiterepl.html +46 -0
  94. package/lightview.js +430 -340
  95. package/lightview.min.js +1 -0
  96. package/lightview_good.js +1267 -0
  97. package/lightview_optimized.js +1274 -0
  98. package/package.json +1 -1
  99. package/repl_hold.html +320 -0
  100. package/test/basic.html +15 -4
  101. package/test/basic.test.mjs +1 -1
  102. package/test/extended.html +1 -1
  103. package/types.js +109 -36
  104. package/components/chart/example.html +0 -32
  105. package/components/chart.html +0 -83
  106. package/components/gantt/example.html +0 -22
  107. package/components/gauge/example.html +0 -28
  108. package/components/gauge.html +0 -60
  109. package/components/orgchart/example.html +0 -25
  110. package/components/repl/code-editor.html +0 -64
  111. package/components/repl/editor.html +0 -37
  112. package/components/repl/editorjs-inline-tool/index.js +0 -3
  113. package/components/repl/editorjs-inline-tool/inline-tools.js +0 -28
  114. package/components/repl/editorjs-inline-tool/tool.js +0 -175
  115. package/components/repl/repl-with-wysiwyg.html +0 -355
  116. package/components/repl/repl.html +0 -345
  117. package/components/repl/sup.js +0 -44
  118. package/components/repl/wysiwyg-repl.html +0 -258
  119. package/components/timeline/example.html +0 -33
  120. package/components/timeline.html +0 -81
  121. package/examples/anchor.html +0 -11
  122. package/examples/sensors/index.html +0 -30
  123. package/examples/todo.html +0 -38
  124. package/examples/top.html +0 -10
  125. package/sites/client.html +0 -48
  126. package/sites/index.html +0 -247
package/components/timeline/example.html DELETED
@@ -1,33 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Lightview:Component:Timeline:Example</title>
5
- <link href="./timeline.html" rel="module">
6
- <script src="../../lightview.js"></script>
7
- </head>
8
- <body>
9
- <l-timeline title="Presidents">
10
- {
11
- options: { showRowLabels: false },
12
- rows: [
13
- [ '1', 'George Washington','1789-03-30', '1797-2-04' ],
14
- [ '2', 'John Adams', '1797-02-04', '1801-02-04' ],
15
- [ '3', 'Thomas Jefferson', '1801-02-04', '1809-02-04']
16
- ]
17
- }
18
- </l-timeline>
19
- <l-timeline title="Presidents and Vice Presidents">
20
- {
21
- options: { },
22
- rows: [
23
- [ 'President', 'George Washington','1789-03-30', '1797-2-04' ],
24
- [ 'President', 'John Adams', '1797-02-04', '1801-02-04' ],
25
- [ 'President', 'Thomas Jefferson', '1801-02-04', '1809-02-04'],
26
- [ 'Vice President', 'John Adams','1789-03-21', '1797-02-04'],
27
- [ 'Vice President', 'Thomas Jefferson','1797-02-04', '1801-02-04'],
28
- [ 'Vice President', 'Aaron Burr','1801-02-04', '1805-02-04']
29
- ]
30
- }
31
- </l-timeline>
32
- </body>
33
- </html>
package/components/timeline.html DELETED
@@ -1,81 +0,0 @@
1
- <html>
2
- <head>
3
- <meta charset="UTF-8">
4
- <title>Lightview:Timeline</title>
5
- </head>
6
- <body hidden>
7
- <div id="target"></div>
8
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
9
- <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
10
- <script type="lightview/module">
11
- debugger;
12
- let table = JSON5.parse(self.firstChild.textContent.trim()),
13
- chart,
14
- datatable,
15
- options = {};
16
- const target = self.getElementById("target"),
17
- resizeObserver = new ResizeObserver(entries => {
18
- for (let entry of entries) {
19
- if(entry.contentBoxSize) {
20
- // Firefox implements `contentBoxSize` as a single content rect, rather than an array
21
- const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
22
- options.width = contentBoxSize.inlineSize;
23
- } else {
24
- options.width = entry.contentRect.width;
25
- }
26
- }
27
- chart.draw(datatable, options);
28
- }),
29
- callback = (textNode, oldValue, newValue) => {
30
- datatable = new google.visualization.DataTable();
31
- try {
32
- table = table || JSON5.parse(newValue.trim());
33
- datatable = google.visualization.arrayToDataTable(table);
34
- chart.draw(datatable, options);
35
- table = null;
36
- } catch (e) {
37
- target.innerText = e + newValue;
38
- }
39
- };
40
- self.firstChild.innerText = "Loading ...";
41
- self.variables({type: "string", title: "string", style: "string"}, {observed});
42
- if(style) target.setAttribute("style",style);
43
- self.addRow = (row) => {
44
- datatable.addRows([row]);
45
- chart.draw(datatable, options);
46
- };
47
- self.setValue = (row,col,value) => {
48
- if(datatable) {
49
- datatable.setValue(row,col,value);
50
- chart.draw(datatable, options);
51
- }
52
- };
53
- self.setOptions = (newOptions) => {
54
- Object.assign(options,newOptions);
55
- };
56
- self.init = () => {
57
- if(!options.title && title) options.title = title;
58
- chart = new google.visualization.Timeline(target);
59
- addEventListener("change",({target,value}) => {
60
- if(target === "title") {
61
- options.title = value;
62
- } else if(target === "style") {
63
- target.setAttribute("style",value);
64
- }
65
- chart.draw(datatable, options);
66
- });
67
-
68
- const node = self.firstChild;
69
- callback(node, node.textContent, node.textContent);
70
- // Will be used by the Lightview global observer
71
- node.characterDataMutationCallback = callback;
72
- // resized charts if window resizes
73
- resizeObserver.observe(target);
74
- };
75
- self.addEventListener("connected", ({target}) => {
76
- google.charts.load("current", {"packages": ["timeline"]});
77
- google.charts.setOnLoadCallback(self.init);
78
- });
79
- </script>
80
- </body>
81
- </html>
package/examples/anchor.html DELETED
@@ -1,11 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Anchors</title>
5
- <script src="../lightview.js?as=x-body"></script>
6
- </head>
7
- <body>
8
- <p><a href="./counter.html" target="#mytarget" crossorigin="use-credentials">Show Counter</a></p>
9
- <div id="mytarget">To Be Replaced</div>
10
- </body>
11
- </html>
package/examples/sensors/index.html DELETED
@@ -1,30 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Lightview:Sensor Demo</title>
4
- <link href="../../components/gauge.html" rel="module">
5
- <script src="../../lightview.js?as=x-body"></script>
6
- </head>
7
- <body>
8
- <div style="width:100%;text-align:center">
9
- <div style="display:inline-block">
10
- <l-gauge id="sensor1" type="Gauge" label="Sensor One" value="50"></l-gauge>
11
- </div>
12
-
13
- <div style="display:inline-block">
14
- <l-gauge id="sensor2" type="Gauge" label="Sensor Two" value="50"></l-gauge>
15
- </div>
16
- </div>
17
-
18
- <script type="lightview/module">
19
- const {remote} = await import("../../types.js");
20
- self.variables({sensor1:"number"},{remote:remote({ttl:5000,path:"https://lightview.dev/sensors/sensor1"})});
21
- self.variables({sensor2:"number"},{remote:remote({ttl:7500,path:"https://lightview.dev/sensors/sensor2"})});
22
- await sensor1;
23
- await sensor2;
24
- addEventListener("change",({variableName,value}) => {
25
- const sensor = document.body.getElementById(variableName);
26
- sensor.setValue(value);
27
- });
28
- </script>
29
- </body>
30
- </html>
package/examples/todo.html DELETED
@@ -1,38 +0,0 @@
1
- <html>
2
- <head>
3
- <title>Lightview:Examples:ToDo</title>
4
- <script src="../lightview.js?as=x-body"></script>
5
- </head>
6
- <body>
7
- <input type="text" value="${newItem}" placeholder="new todo item...">
8
- <button l-on:click="${addToList}">Add</button>
9
- <div l-for="${todoList}">
10
- <input value="${item.status}" type="checkbox">
11
- <span class="${item.status ? 'checked' : ''}">${item.text}</span>
12
- <span l-on:click="({self}) => self.removeFromList(${index})">X>
13
- <br/>
14
- </div>
15
- <script type="lightview/module">
16
- self.variables(
17
- { todoList: Array },
18
- {
19
- reactive,
20
- set: [
21
- {text: 'Write my first post', status: true},
22
- {text: 'Upload the post to the blog', status: false}
23
- ]
24
- }
25
- );
26
- self.addToList = () => {
27
- todoList = [...todoList, {text: newItem, status: false}];
28
- newItem = '';
29
- };
30
- self.removeFromList = (index) => {
31
- todoList.splice(index, 1);
32
- };
33
- </script>
34
- <style>
35
- .checked { text-decoration: line-through; }
36
- </style>
37
- </body>
38
- </html>
package/examples/top.html DELETED
@@ -1,10 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Top</title>
4
- <link href="./nested.html" rel="module">
5
- <script src="../lightview.js?as=x-body"></script>
6
- </head>
7
- <body>
8
- <l-nested></l-nested>
9
- </body>
10
- </html>
package/sites/client.html DELETED
@@ -1,48 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Sites:Client</title>
6
- <template id="template"></template>
7
- <script src="../lightview.js"></script>
8
- <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
9
- <script>
10
- const template = document.getElementById("template"),
11
- client = new Peer("anywhichway3",{debug:3});
12
- client.on("open",(id) => {
13
- console.log(id);
14
- setTimeout(()=> document.body.innerHTML+=id);
15
- const server = client.connect("anywhichway1");
16
- server.on("open",() => {
17
- server.send("Hi from " + id);
18
- setTimeout(() => {
19
- server.send("Hi from " + id);
20
- },5000);
21
- });
22
- });
23
- client.on("connection",(conn) => {
24
- //conn.on("open",() => {
25
- // conn.send("Client does not accept inbound connections")
26
- // });
27
- conn.on("data",(data) => {
28
- console.log(data);
29
- template.innerHTML = data;
30
- setTimeout(()=> document.body.innerHTML=data);
31
- const component = window.customElements.get("x-body");
32
- if(component) component.setTemplateNode(template)
33
- else Lightview.createComponent("x-body",template);
34
- const body = document.createElement("x-body");
35
- document.body.parentElement.replaceChild(body, document.body);
36
- Object.defineProperty(document, "body", {
37
- enumerable: true, configurable: true, get() {
38
- return body;
39
- }
40
- });
41
- })
42
- });
43
- </script>
44
- </head>
45
- <body>
46
-
47
- </body>
48
- </html>
package/sites/index.html DELETED
@@ -1,247 +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://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
7
- <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
8
- <script src="https://cdn.tiny.cloud/1/y2ts772rioh7s7bmlcosnef03zs6kpedu5ovw1sdfzslurej/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
9
- <script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
10
- <script src="https://unpkg.com/isomorphic-git"></script>
11
- <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
12
- <script type="module">
13
- const fs = new LightningFS('my-app');
14
- const files = await git.listFiles({ fs, dir: '/' });
15
- console.log(files);
16
- window.fs = fs.promises;
17
- </script>
18
- <script>
19
- var server = new Peer("anywhichway1");
20
- // on open will be launch when you successfully connect to PeerServer
21
- server.on('open', (id) => {
22
- console.log(id);
23
- });
24
- server.on("connection",(conn) => {
25
- conn.on('data', async (data) => {
26
- console.log('Received', data);
27
- let content = await fs.readFile("/test.html",{encoding:"utf8"});
28
- const client = server.connect(conn.peer);
29
- client.on("open",() => {
30
- content += `<p>${new Date().toISOString()}</p>`
31
- client.send(content);
32
- });
33
- });
34
- //const client = server.connect(conn.peer);
35
- })
36
- </script>
37
- <script src="../lightview.js?as=x-body"></script>
38
- </head>
39
- <body style="display:flex;flex-direction:row;min-height:98vh;margin: 10px">
40
- <div style="width:200px;min-height:100%;border:1px solid;padding-left:10px;padding-bottom:10px">
41
- <div style="width:100%;"><label for="hamburger" style="float:left" l-on:click="${onTabClick}">hamburger</label><br></br>Files</div>
42
- <div id="files"></div>
43
- </div>
44
- <div id="content" style="flex:auto;min-height:100%;border:1px solid;padding:10px">
45
- <div style="display:flex;flex-direction:column;min-height:100%">
46
- <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;display:none">
47
- <label for="markdown" l-on:click="${onTabClick}">Markdown</label>
48
- <label for="html" l-on:click="${onTabClick}">HTML</label>
49
- <label for="css" l-on:click="${onTabClick}">Style</label>
50
- <label for="script" l-on:click="${onTabClick}">Script</label>
51
- <label for="head" l-on:click="${onTabClick}">Head</label>
52
- <label for="preview" l-on:click="${onTabClick}">Preview</label>
53
- </div>
54
- <textarea id="markdown" style="flex-grow:1;padding-right:2px;;display:none">${bodyMarkdown}</textarea>
55
- <textarea id="html" style="flex-grow:1;padding-right:2px;display:none">${bodyHTML}</textarea>
56
- <textarea id="css" style="flex-grow:1;display:none">${cssText}</textarea>
57
- <textarea id="script" style="flex-grow:1;display:none">${scriptText}</textarea>
58
- <textarea id="head" style="flex-grow:1;display:none">${headText}</textarea>
59
- <div id="preview" style="flex-grow:1;display:none"></div>
60
- <div id="hamburger" style="flex-grow:1;display:none">options</div>
61
- <div id="wysiwyg" style="flex-grow:1;width:100%;border:1px solid">
62
- </div>
63
- </div>
64
- </div>
65
- <style id="style"></style>
66
- <script type="lightview/module">
67
- const turndownService = new TurndownService({headingStyle:"atx",codeBlockStyle:"fenced",emDelimiter:"*"}),
68
- fs = new LightningFS('my-app').promises;
69
- turndownService.keep(() => true);
70
-
71
- const {html,css,script} = await import("../types.js");
72
- self.variables({
73
- onTabClick:"function"
74
- });
75
- self.variables({
76
- bodyMarkdown:html,
77
- bodyHTML:html,
78
- cssText:css,
79
- scriptText:script,
80
- headHTML:html
81
- },{reactive});
82
-
83
- let fragment;
84
- try {
85
- const fullHTML = await fs.readFile("/test.html",{encoding:"utf8"}),
86
- parser = new DOMParser();
87
- fragment = parser.parseFromString(fullHTML||"","text/html");
88
- } catch(e) {
89
-
90
- };
91
-
92
- const body_el = fragment?.body,
93
- style_el = fragment?.querySelector("style"),
94
- script_el = fragment?.querySelector("script");
95
- if(style_el) style_el.remove();
96
- if(script_el) script_el.remove();
97
-
98
- bodyHTML = body_el?.innerHTML || "";
99
- bodyMarkdown = "";
100
- cssText = style_el?.innerHTML || "";
101
- scriptText = script_el?.innerHTML || "",
102
- headHTML = fragment?.head.innerHTML || "";
103
-
104
- const tabs = [...self.querySelectorAll("label[for]")]
105
- .map((label) => {
106
- const id = label.getAttribute("for");
107
- return [id,self.getElementById(id),label];
108
- });
109
-
110
- onTabClick = (event) => {
111
- const targetid = event.target.getAttribute("for");
112
- tabs.forEach(([id,el,label]) => {
113
- if(id===targetid) {
114
- el.style.display = "unset";
115
- label.style.borderBottom = "solid";
116
- } else {
117
- el.style.display = "none";
118
- label.style.borderBottom = "none";
119
- }
120
- });
121
- if(targetid==="preview") doPreview();
122
- };
123
-
124
- const doPreview = () => {
125
- const template = document.createElement("template");
126
- template.innerHTML = "<style>" + cssText + "</style>" + htmlEl.value + '<script type="lightview/module">' + scriptText + "<" + "/script>";
127
- const component = window.customElements.get("x-preview");
128
- if(component) { component.setTemplateNode(template); }
129
- else { Lightview.createComponent("x-preview",template); }
130
- previewEl.innerHTML = "<x-preview></x-preview>";
131
- fs.writeFile("/test.html",template.innerHTML,{encoding:"utf8"},()=>{});
132
- };
133
-
134
- const wysywigEl = self.getElementById("wysiwyg"),
135
- markdownEl = self.getElementById("markdown"),
136
- htmlEl = self.getElementById("html"),
137
- tabsEl = self.getElementById("tabs"),
138
- styleEl = self.getElementById("style"),
139
- previewEl = self.getElementById("preview");
140
-
141
- let prevtext; // prevents indirect recursion
142
- observe(() => {
143
- const text = turndownService.turndown(bodyHTML).trim();
144
- if(text && text!==prevtext) {
145
- bodyMarkdown = markdownEl.innerHTML = prevtext = text;
146
- }
147
- });
148
-
149
- let prevhtml; // prevents indirect recursion
150
- observe(() => {
151
- const html = marked.parse(bodyMarkdown).trim();
152
- if(html && html!==prevhtml) {
153
- bodyHTML = htmlEl.innerText = prevhtml = html;
154
- }
155
- });
156
-
157
- observe(() => {
158
- const dummy = cssText;
159
- if(tinymce.activeEditor) {
160
- tinymce.activeEditor.destroy();
161
- initMCE();
162
- }
163
- });
164
-
165
- let advEdit = false;
166
- const toggleAdvEdit = () => {
167
- advEdit = !advEdit;
168
- if(advEdit) {
169
- tabsEl.style.display = "unset";
170
- } else {
171
- tabsEl.style.display = "none";
172
- }
173
- tabs.forEach(([_,el,label]) => {
174
- if(advEdit && el===markdownEl) {
175
- el.style.display = "unset";
176
- label.style.borderBottom = "solid";
177
- return;
178
- }
179
- el.style.display = "none";
180
- label.style.borderBottom = "none";
181
- });
182
- initMCE();
183
- };
184
-
185
- const initMCE = () => {
186
- tinymce.init({
187
- target: wysywigEl,
188
- content_style: cssText,
189
- setup: (editor) => {
190
- editor.ui.registry.addButton('advancedEdit', {
191
- text: 'AdvEdit',
192
- onAction: () => {
193
- editor.destroy();
194
- toggleAdvEdit();
195
- }
196
- });
197
- editor.on("init",() => {
198
- observe(()=> {
199
- const html = editor.getContent();
200
- if(html !== bodyHTML) {
201
- editor.setContent(bodyHTML);
202
- }
203
- });
204
- });
205
- ["input","FormatApply","FormatRemove"]
206
- .forEach((event) => {
207
- editor.on(event,() => {
208
- const html = editor.getContent();
209
- if(!bodyHTML || (bodyHTML !== html)) {
210
- bodyHTML = htmlEl.innerText = html;
211
- }
212
- });
213
- });
214
- },
215
- plugins: "a11ychecker advcode casechange export formatpainter image editimage linkchecker autolink lists checklist media mediaembed pageembed powerpaste searchreplace table advtable tableofcontents tinycomments tinymcespellchecker",
216
- toolbar: "undo redo | addcomment showcomments | h1 h2 h3 h4 formatselect casechange bullist numlist checklist | advancedEdit",
217
- toolbar_mode: "floating",
218
- tinycomments_mode: "embedded",
219
- tinycomments_author: "Author name",
220
- removed_menuitems: 'fontsizes, fontformats, forecolor, backcolor, lineheight, inline, inserttable code undo redo',
221
- style_formats: [
222
- { title: 'Headings', items: [
223
- { title: 'Heading 1', format: 'h1' },
224
- { title: 'Heading 2', format: 'h2' },
225
- { title: 'Heading 3', format: 'h3' },
226
- { title: 'Heading 4', format: 'h4' },
227
- { title: 'Heading 5', format: 'h5' },
228
- { title: 'Heading 6', format: 'h6' }
229
- ]
230
- }
231
- ],
232
- statusbar: false,
233
- menu: {
234
- format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | codeformat blockformats align | removeformat'}
235
- }
236
- });
237
- };
238
-
239
- self.addEventListener("connected",() => {
240
- initMCE();
241
- });
242
-
243
- // format: remove fonts, line height, text color, background color formats.inline, formats.block.div and formats.blocks.pre, block.pre
244
- // view: remove source code
245
- </script>
246
- </body>
247
- </html>