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.
- package/README.md +15 -16
- package/docs/CNAME +1 -0
- package/docs/api.html +674 -0
- package/docs/blank.html +10 -0
- package/docs/comparedto.html +89 -0
- package/docs/components/chart-repl.html +69 -0
- package/{components/chart → docs/components}/chart.html +2 -2
- package/{components → docs/components}/components.js +3 -3
- package/docs/components/contents.html +17 -0
- package/docs/components/gantt-repl.html +61 -0
- package/{components/gantt → docs/components}/gantt.html +3 -3
- package/docs/components/gauge-repl.html +66 -0
- package/{components/gauge → docs/components}/gauge.html +2 -2
- package/docs/components/orgchart-repl.html +64 -0
- package/{components/orgchart → docs/components}/orgchart.html +2 -2
- package/docs/components/repl-as-src.html +17 -0
- package/docs/components/repl-repl.html +95 -0
- package/docs/components/repl.html +527 -0
- package/docs/components/timeline-repl.html +72 -0
- package/{components/timeline → docs/components}/timeline.html +2 -2
- package/docs/components.html +14 -0
- package/docs/css/highlightjs.min.css +9 -0
- package/docs/css/tutorial.css +35 -0
- package/docs/examples/anchor.html +11 -0
- package/{examples → docs/examples}/chart.html +2 -2
- package/{examples → docs/examples}/counter.html +1 -1
- package/{examples → docs/examples}/counter.test.mjs +0 -0
- package/{examples → docs/examples}/counter2.html +1 -1
- package/{examples → docs/examples}/directives.html +1 -1
- package/{examples → docs/examples}/foreign.html +1 -1
- package/{examples → docs/examples}/forgeinform.html +1 -1
- package/{examples → docs/examples}/form.html +1 -1
- package/{examples → docs/examples}/gauge.html +2 -2
- package/{examples → docs/examples}/invalid-template-literals.html +1 -1
- package/{examples → docs/examples}/medium/remote.html +1 -1
- package/{examples → docs/examples}/message.html +0 -0
- package/{examples → docs/examples}/nested.html +1 -1
- package/{examples → docs/examples}/object-bound-form.html +0 -0
- package/{examples → docs/examples}/remote-server.js +0 -0
- package/{examples → docs/examples}/remote.html +2 -2
- package/{examples → docs/examples}/remote.json +0 -0
- package/{examples → docs/examples}/scratch.html +1 -1
- package/docs/examples/sensors/index.html +44 -0
- package/{examples → docs/examples}/sensors/sensor-server.js +0 -0
- package/{examples → docs/examples}/shared.html +0 -0
- package/{examples → docs/examples}/template.html +1 -1
- package/{examples → docs/examples}/timeline.html +2 -2
- package/docs/examples/todo.html +40 -0
- package/docs/examples/top.html +10 -0
- package/{examples → docs/examples}/types.html +1 -1
- package/{examples → docs/examples}/xor.html +1 -1
- package/docs/examples.html +25 -0
- package/docs/index.html +44 -0
- package/docs/javascript/codejar.min.js +8 -0
- package/docs/javascript/highlightjs.min.js +1173 -0
- package/docs/javascript/isomorphic-git.js +9 -0
- package/docs/javascript/json5.min.js +1 -0
- package/docs/javascript/lightning-fs.js +1 -0
- package/docs/javascript/lightview.js +1285 -0
- package/docs/javascript/marked.min.js +6 -0
- package/docs/javascript/peerjs.min.js +70 -0
- package/docs/javascript/turndown.js +973 -0
- package/docs/javascript/types.js +606 -0
- package/docs/javascript/utils.js +45 -0
- package/docs/lightview.html +63 -0
- package/docs/old_index.html +965 -0
- package/docs/old_index.md +1132 -0
- package/docs/slidein.html +51 -0
- package/docs/tutorial/0-getting-started.html +67 -0
- package/docs/tutorial/1-intro-to-variables.html +103 -0
- package/docs/tutorial/10-template-components.html +80 -0
- package/docs/tutorial/11-linked-components.html +76 -0
- package/docs/tutorial/12-imported-components.html +67 -0
- package/docs/tutorial/13-input-binding.html +94 -0
- package/docs/tutorial/14-automatic-variable-creation.html +74 -0
- package/docs/tutorial/15-form-binding.html +110 -0
- package/docs/tutorial/16-if-directive.html +60 -0
- package/docs/tutorial/17-loop-directives.html +83 -0
- package/docs/tutorial/18-sanitizing-and-escaping-input.html +79 -0
- package/docs/tutorial/2-imported-and-exported-variables.html +80 -0
- package/docs/tutorial/3-data-types.html +89 -0
- package/docs/tutorial/4-extended-data-types.html +83 -0
- package/docs/tutorial/5-extended-functional-types.html +96 -0
- package/docs/tutorial/5.1-extended-functional-types.html +79 -0
- package/docs/tutorial/5.2-extended-functional-types.html +70 -0
- package/docs/tutorial/6-conventional-javascript.html +75 -0
- package/docs/tutorial/7-monitoring-with-observers.html +107 -0
- package/docs/tutorial/8-event-listeners.html +65 -0
- package/docs/tutorial/9-intro-to-components.html +91 -0
- package/docs/tutorial/contents.html +32 -0
- package/docs/tutorial/my-component.html +29 -0
- package/docs/tutorial/remote-value.json +4 -0
- package/docs/websiterepl.html +46 -0
- package/lightview.js +430 -340
- package/lightview.min.js +1 -0
- package/lightview_good.js +1267 -0
- package/lightview_optimized.js +1274 -0
- package/package.json +1 -1
- package/repl_hold.html +320 -0
- package/test/basic.html +15 -4
- package/test/basic.test.mjs +1 -1
- package/test/extended.html +1 -1
- package/types.js +109 -36
- package/components/chart/example.html +0 -32
- package/components/chart.html +0 -83
- package/components/gantt/example.html +0 -22
- package/components/gauge/example.html +0 -28
- package/components/gauge.html +0 -60
- package/components/orgchart/example.html +0 -25
- package/components/repl/code-editor.html +0 -64
- package/components/repl/editor.html +0 -37
- package/components/repl/editorjs-inline-tool/index.js +0 -3
- package/components/repl/editorjs-inline-tool/inline-tools.js +0 -28
- package/components/repl/editorjs-inline-tool/tool.js +0 -175
- package/components/repl/repl-with-wysiwyg.html +0 -355
- package/components/repl/repl.html +0 -345
- package/components/repl/sup.js +0 -44
- package/components/repl/wysiwyg-repl.html +0 -258
- package/components/timeline/example.html +0 -33
- package/components/timeline.html +0 -81
- package/examples/anchor.html +0 -11
- package/examples/sensors/index.html +0 -30
- package/examples/todo.html +0 -38
- package/examples/top.html +0 -10
- package/sites/client.html +0 -48
- package/sites/index.html +0 -247
package/components/chart.html
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
<html>
|
|
2
|
-
<head>
|
|
3
|
-
<meta charset="UTF-8">
|
|
4
|
-
<title>Lightview:Chart</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 id="lightview">
|
|
11
|
-
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
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[type](target);
|
|
59
|
-
addEventListener("change", ({target, value}) => {
|
|
60
|
-
if (target === "type") {
|
|
61
|
-
chart = new google.visualization[type](target);
|
|
62
|
-
} else if (target === "title") {
|
|
63
|
-
options.title = value;
|
|
64
|
-
} else if (target === "style") {
|
|
65
|
-
target.setAttribute("style", value);
|
|
66
|
-
}
|
|
67
|
-
chart.draw(datatable, options);
|
|
68
|
-
});
|
|
69
|
-
const node = self.firstChild;
|
|
70
|
-
callback(node, node.textContent, node.textContent);
|
|
71
|
-
// Will be used by the Lightview global observer
|
|
72
|
-
node.characterDataMutationCallback = callback;
|
|
73
|
-
// resized charts if window resizes
|
|
74
|
-
resizeObserver.observe(target);
|
|
75
|
-
};
|
|
76
|
-
self.addEventListener("connected", ({target}) => {
|
|
77
|
-
google.charts.load("current", {"packages": ["corechart", "gauge"]});
|
|
78
|
-
google.charts.setOnLoadCallback(self.init);
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
</script>
|
|
82
|
-
</body>
|
|
83
|
-
</html>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<title>Lightview:Component:Gantt:Example</title>
|
|
5
|
-
<link href="./gantt.html" rel="module">
|
|
6
|
-
<script src="../../lightview.js"></script>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<l-gantt id="myChart" style="height:500px;" title="Research Project">
|
|
10
|
-
{
|
|
11
|
-
options: { },
|
|
12
|
-
rows: [
|
|
13
|
-
['Research', 'Find sources',"2015-01-01", "2015-01-05", null, 100, null],
|
|
14
|
-
['Write', 'Write paper',null,"2015-01-09", "3d", 25, 'Research,Outline'],
|
|
15
|
-
['Cite', 'Create bibliography',null, "2015-01-07","1d" , 20, 'Research'],
|
|
16
|
-
['Complete', 'Hand in paper', null, "2015-01-10", "1d" , 0, 'Cite,Write'],
|
|
17
|
-
['Outline', 'Outline paper', null, "2015-01-06", "1d" , 100, 'Research']
|
|
18
|
-
]
|
|
19
|
-
}
|
|
20
|
-
</l-gantt>
|
|
21
|
-
</body>
|
|
22
|
-
</html>
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<head>
|
|
3
|
-
<title>Lightview:Component:Gauge:Example</title>
|
|
4
|
-
<link href="./gauge.html" rel="module">
|
|
5
|
-
<script src="../../lightview.js"></script>
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<l-gauge id="myChart" style="height:500px;" title="Server" hidden l-unhide>
|
|
9
|
-
{
|
|
10
|
-
options: {
|
|
11
|
-
|
|
12
|
-
},
|
|
13
|
-
rows: [
|
|
14
|
-
['Memory', 80],
|
|
15
|
-
['CPU', 55],
|
|
16
|
-
['Network', 68]
|
|
17
|
-
]
|
|
18
|
-
}
|
|
19
|
-
</l-gauge>
|
|
20
|
-
<script>
|
|
21
|
-
const el = document.getElementById("myChart");
|
|
22
|
-
el.addEventListener("mounted",() => {
|
|
23
|
-
chart = el.chart;
|
|
24
|
-
chart.addRow(["Storage",10]);
|
|
25
|
-
});
|
|
26
|
-
</script>
|
|
27
|
-
</body>
|
|
28
|
-
</html>
|
package/components/gauge.html
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
<html>
|
|
2
|
-
<head>
|
|
3
|
-
<meta charset="UTF-8">
|
|
4
|
-
<title>Lightview:Gauge</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 id="lightview">
|
|
11
|
-
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
|
|
12
|
-
const target = self.getElementById("target"),
|
|
13
|
-
resizeObserver = new ResizeObserver(entries => {
|
|
14
|
-
for (let entry of entries) {
|
|
15
|
-
if (entry.contentBoxSize) {
|
|
16
|
-
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
|
|
17
|
-
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
|
|
18
|
-
options.width = contentBoxSize.inlineSize;
|
|
19
|
-
} else {
|
|
20
|
-
options.width = entry.contentRect.width;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
chart.draw(datatable, options);
|
|
24
|
-
});
|
|
25
|
-
let chart,
|
|
26
|
-
datatable,
|
|
27
|
-
options;
|
|
28
|
-
self.variables({label: "string", value: "number", style: "string"}, {observed});
|
|
29
|
-
if (style) target.setAttribute("style", style);
|
|
30
|
-
self.setValue = (newValue) => {
|
|
31
|
-
if (datatable) {
|
|
32
|
-
datatable.setValue(0, 1, newValue);
|
|
33
|
-
chart.draw(datatable, options);
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
self.init = () => {
|
|
37
|
-
options = {};
|
|
38
|
-
chart = new google.visualization.Gauge(target);
|
|
39
|
-
datatable = google.visualization.arrayToDataTable([["Label", "Value"], [label, value]]);
|
|
40
|
-
addEventListener("change", ({target, value}) => {
|
|
41
|
-
if (target === "label") {
|
|
42
|
-
datatable.setValue(0, 0, value);
|
|
43
|
-
} else if (target === "value") {
|
|
44
|
-
self.setValue(value);
|
|
45
|
-
} else if (target === "style") {
|
|
46
|
-
target.setAttribute("style", value);
|
|
47
|
-
}
|
|
48
|
-
chart.draw(datatable, options);
|
|
49
|
-
});
|
|
50
|
-
resizeObserver.observe(target);
|
|
51
|
-
self.removeAttribute("hidden");
|
|
52
|
-
};
|
|
53
|
-
self.addEventListener("mounted", ({target}) => {
|
|
54
|
-
google.charts.load("current", {"packages": ["corechart", "gauge"]});
|
|
55
|
-
google.charts.setOnLoadCallback(self.init);
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
</script>
|
|
59
|
-
</body>
|
|
60
|
-
</html>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<title>Lightview:Component:OrgChart:Example</title>
|
|
5
|
-
<link href="./orgchart.html" rel="module">
|
|
6
|
-
<script src="../../lightview2.js"></script>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<l-orgchart id="myChart" style="height:500px;" title="My Org">
|
|
10
|
-
{
|
|
11
|
-
options: {
|
|
12
|
-
selectedStyle:"color:red"
|
|
13
|
-
},
|
|
14
|
-
// 4 columns in definition data name,title,manager,tooltip
|
|
15
|
-
rows: [
|
|
16
|
-
["Mike","President","",""],
|
|
17
|
-
["Jim","CFO","Mike",""],
|
|
18
|
-
['Alice', 'Controller','Jim',""],
|
|
19
|
-
['Bob', 'CIO', 'Mike',""],
|
|
20
|
-
['Carol', 'Executive Assistant',"Mike",""]
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
</l-orgchart>
|
|
24
|
-
</body>
|
|
25
|
-
</html>
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Title</title>
|
|
6
|
-
<link rel="stylesheet"
|
|
7
|
-
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
|
|
8
|
-
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<div style="position:relative">
|
|
12
|
-
<pre style="position:absolute;top:0;left:0;"><textarea id="editor" class="hljs language-html" style="border:none"></textarea></pre>
|
|
13
|
-
<pre style="position:absolute;top:0;left:0;"><code id="codereflector" class="hljs language-html" style="padding:2px;"></code></pre>
|
|
14
|
-
</div>
|
|
15
|
-
<style>
|
|
16
|
-
.cursor {
|
|
17
|
-
-webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */
|
|
18
|
-
animation: 2s linear infinite condemned_blink_effect;
|
|
19
|
-
position:relative;left:-.45ch;letter-spacing:1px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
/* for Safari 4.0 - 8.0 */
|
|
23
|
-
@-webkit-keyframes condemned_blink_effect {
|
|
24
|
-
0% {
|
|
25
|
-
visibility: hidden;
|
|
26
|
-
}
|
|
27
|
-
50% {
|
|
28
|
-
visibility: hidden;
|
|
29
|
-
}
|
|
30
|
-
100% {
|
|
31
|
-
visibility: visible;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
@keyframes condemned_blink_effect {
|
|
36
|
-
0% {
|
|
37
|
-
visibility: hidden;
|
|
38
|
-
}
|
|
39
|
-
50% {
|
|
40
|
-
visibility: hidden;
|
|
41
|
-
}
|
|
42
|
-
100% {
|
|
43
|
-
visibility: visible;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
</style>
|
|
47
|
-
<script>
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
const editor = document.getElementById("editor"),
|
|
51
|
-
reflector = document.getElementById("codereflector");
|
|
52
|
-
Object.defineProperty(editor,"innerText",{get() { return editor.value; }});
|
|
53
|
-
editor.addEventListener("input",() => {
|
|
54
|
-
//editor.style.cssText = document.defaultView.getComputedStyle(reflector, "").cssText;
|
|
55
|
-
const startPosition = editor.selectionStart,
|
|
56
|
-
endPosition = editor.selectionEnd,
|
|
57
|
-
value = editor.value.substring(0,startPosition) + "|cursor|" + editor.value.substring(startPosition);
|
|
58
|
-
reflector.innerText = value;
|
|
59
|
-
hljs.highlightElement(reflector);
|
|
60
|
-
reflector.innerHTML = reflector.innerHTML.replace("|cursor|",'<span class="cursor">|</span>');
|
|
61
|
-
})
|
|
62
|
-
</script>
|
|
63
|
-
</body>
|
|
64
|
-
</html>
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<title>Lightview:Component:REPL:Example</title>
|
|
6
|
-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
|
7
|
-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
|
|
8
|
-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<div id="editor"></div>
|
|
12
|
-
<script>
|
|
13
|
-
const wysywigEl = document.getElementById("wysywig");
|
|
14
|
-
const editor = new EditorJS({
|
|
15
|
-
/**
|
|
16
|
-
* Id of Element that should contain the Editor
|
|
17
|
-
*/
|
|
18
|
-
holder: "editor",
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Available Tools list.
|
|
22
|
-
* Pass Tool's class or Settings object for each Tool you want to use
|
|
23
|
-
*/
|
|
24
|
-
tools: {
|
|
25
|
-
header: {
|
|
26
|
-
class: Header,
|
|
27
|
-
inlineToolbar: ['link']
|
|
28
|
-
},
|
|
29
|
-
list: {
|
|
30
|
-
class: List,
|
|
31
|
-
inlineToolbar: true
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
})
|
|
35
|
-
</script>
|
|
36
|
-
</body>
|
|
37
|
-
</html>
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import createGenericInlineTool from './tool.js';
|
|
2
|
-
export var ItalicInlineTool = createGenericInlineTool({
|
|
3
|
-
sanitize: {
|
|
4
|
-
em: {},
|
|
5
|
-
},
|
|
6
|
-
shortcut: 'CMD+I',
|
|
7
|
-
tagName: 'EM',
|
|
8
|
-
toolboxIcon:
|
|
9
|
-
// icon editor-js uses
|
|
10
|
-
'<svg class="icon icon--italic" width="34px" height="34px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#italic"></use></svg>',
|
|
11
|
-
});
|
|
12
|
-
export var StrongInlineTool = createGenericInlineTool({
|
|
13
|
-
sanitize: {
|
|
14
|
-
strong: {},
|
|
15
|
-
},
|
|
16
|
-
shortcut: 'CMD+B',
|
|
17
|
-
tagName: 'STRONG',
|
|
18
|
-
toolboxIcon: '<svg class="icon icon--bold" width="12px" height="14px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bold"></use></svg>',
|
|
19
|
-
});
|
|
20
|
-
export var UnderlineInlineTool = createGenericInlineTool({
|
|
21
|
-
sanitize: {
|
|
22
|
-
u: {},
|
|
23
|
-
},
|
|
24
|
-
tagName: 'U',
|
|
25
|
-
// icon taken from https://github.com/mui-org/material-ui/blob/4fba0dafd30f608937efa32883d151ba01fc9681/packages/material-ui-icons/src/FormatUnderlined.js
|
|
26
|
-
toolboxIcon: '<svg width="24" height="24" viewBox="-8 0 38 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path></svg>',
|
|
27
|
-
});
|
|
28
|
-
//# sourceMappingURL=inline-tools.js.map
|
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* GenericInlineTool returns an EditorJS.InlineTool capable of wrapping a
|
|
3
|
-
* selected text with any given `tagName`.
|
|
4
|
-
*
|
|
5
|
-
* inspired by
|
|
6
|
-
* @see https://github.com/editor-js/marker/blob/c306bcb33c88eaa3c172eaf387fbcd06ae6b297f/src/index.js
|
|
7
|
-
*/
|
|
8
|
-
var createGenericInlineTool = function (_a) {
|
|
9
|
-
var _b;
|
|
10
|
-
var sanitize = _a.sanitize, shortcut = _a.shortcut, tagName = _a.tagName, toolboxIcon = _a.toolboxIcon;
|
|
11
|
-
return _b = /** @class */ (function () {
|
|
12
|
-
/**
|
|
13
|
-
* @param {{api: object}} - Editor.js API
|
|
14
|
-
*/
|
|
15
|
-
function GenericInlineTool(_a) {
|
|
16
|
-
var api = _a.api;
|
|
17
|
-
this.api = null;
|
|
18
|
-
this.button = null;
|
|
19
|
-
this.tag = null;
|
|
20
|
-
this.iconClasses = null;
|
|
21
|
-
this.api = api;
|
|
22
|
-
/**
|
|
23
|
-
* Toolbar Button
|
|
24
|
-
*
|
|
25
|
-
* @type {HTMLElement|null}
|
|
26
|
-
*/
|
|
27
|
-
this.button = null;
|
|
28
|
-
/**
|
|
29
|
-
* Tag that should is rendered in the editor
|
|
30
|
-
*
|
|
31
|
-
* @type {string}
|
|
32
|
-
*/
|
|
33
|
-
this.tag = tagName;
|
|
34
|
-
/**
|
|
35
|
-
* CSS classes
|
|
36
|
-
*/
|
|
37
|
-
this.iconClasses = {
|
|
38
|
-
base: this.api.styles.inlineToolButton,
|
|
39
|
-
active: this.api.styles.inlineToolButtonActive,
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
/**
|
|
43
|
-
* Create button element for Toolbar
|
|
44
|
-
*
|
|
45
|
-
* @return {HTMLButtonElement}
|
|
46
|
-
*/
|
|
47
|
-
GenericInlineTool.prototype.render = function () {
|
|
48
|
-
this.button = document.createElement('button');
|
|
49
|
-
this.button.type = 'button';
|
|
50
|
-
this.button.classList.add(this.iconClasses.base);
|
|
51
|
-
this.button.innerHTML = this.toolboxIcon;
|
|
52
|
-
return this.button;
|
|
53
|
-
};
|
|
54
|
-
/**
|
|
55
|
-
* Wrap/Unwrap selected fragment
|
|
56
|
-
*
|
|
57
|
-
* @param {Range} range - selected fragment
|
|
58
|
-
*/
|
|
59
|
-
GenericInlineTool.prototype.surround = function (range) {
|
|
60
|
-
if (!range) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
var termWrapper = this.api.selection.findParentTag(this.tag);
|
|
64
|
-
/**
|
|
65
|
-
* If start or end of selection is in the highlighted block
|
|
66
|
-
*/
|
|
67
|
-
if (termWrapper) {
|
|
68
|
-
this.unwrap(termWrapper);
|
|
69
|
-
}
|
|
70
|
-
else {
|
|
71
|
-
this.wrap(range);
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
/**
|
|
75
|
-
* Wrap selection with term-tag
|
|
76
|
-
*
|
|
77
|
-
* @param {Range} range - selected fragment
|
|
78
|
-
*/
|
|
79
|
-
GenericInlineTool.prototype.wrap = function (range) {
|
|
80
|
-
/**
|
|
81
|
-
* Create a wrapper for given tagName
|
|
82
|
-
*/
|
|
83
|
-
var strongElement = document.createElement(this.tag);
|
|
84
|
-
/**
|
|
85
|
-
* SurroundContent throws an error if the Range splits a non-Text node with only one of its boundary points
|
|
86
|
-
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents}
|
|
87
|
-
*
|
|
88
|
-
* // range.surroundContents(span);
|
|
89
|
-
*/
|
|
90
|
-
strongElement.appendChild(range.extractContents());
|
|
91
|
-
range.insertNode(strongElement);
|
|
92
|
-
/**
|
|
93
|
-
* Expand (add) selection to highlighted block
|
|
94
|
-
*/
|
|
95
|
-
this.api.selection.expandToTag(strongElement);
|
|
96
|
-
};
|
|
97
|
-
/**
|
|
98
|
-
* Unwrap term-tag
|
|
99
|
-
*
|
|
100
|
-
* @param {HTMLElement} termWrapper - term wrapper tag
|
|
101
|
-
*/
|
|
102
|
-
GenericInlineTool.prototype.unwrap = function (termWrapper) {
|
|
103
|
-
/**
|
|
104
|
-
* Expand selection to all term-tag
|
|
105
|
-
*/
|
|
106
|
-
this.api.selection.expandToTag(termWrapper);
|
|
107
|
-
var sel = window.getSelection();
|
|
108
|
-
var range = sel.getRangeAt(0);
|
|
109
|
-
var unwrappedContent = range.extractContents();
|
|
110
|
-
/**
|
|
111
|
-
* Remove empty term-tag
|
|
112
|
-
*/
|
|
113
|
-
termWrapper.parentNode.removeChild(termWrapper);
|
|
114
|
-
/**
|
|
115
|
-
* Insert extracted content
|
|
116
|
-
*/
|
|
117
|
-
range.insertNode(unwrappedContent);
|
|
118
|
-
/**
|
|
119
|
-
* Restore selection
|
|
120
|
-
*/
|
|
121
|
-
sel.removeAllRanges();
|
|
122
|
-
sel.addRange(range);
|
|
123
|
-
};
|
|
124
|
-
/**
|
|
125
|
-
* Check and change Term's state for current selection
|
|
126
|
-
*/
|
|
127
|
-
GenericInlineTool.prototype.checkState = function () {
|
|
128
|
-
var termTag = this.api.selection.findParentTag(this.tag);
|
|
129
|
-
this.button.classList.toggle(this.iconClasses.active, !!termTag);
|
|
130
|
-
return !!termTag;
|
|
131
|
-
};
|
|
132
|
-
Object.defineProperty(GenericInlineTool.prototype, "toolboxIcon", {
|
|
133
|
-
/**
|
|
134
|
-
* Get Tool icon's SVG
|
|
135
|
-
* @return {string}
|
|
136
|
-
*/
|
|
137
|
-
get: function () {
|
|
138
|
-
return toolboxIcon;
|
|
139
|
-
},
|
|
140
|
-
enumerable: false,
|
|
141
|
-
configurable: true
|
|
142
|
-
});
|
|
143
|
-
Object.defineProperty(GenericInlineTool, "sanitize", {
|
|
144
|
-
/**
|
|
145
|
-
* Sanitizer rule
|
|
146
|
-
* @return {Object.<string>} {Object.<string>}
|
|
147
|
-
*/
|
|
148
|
-
get: function () {
|
|
149
|
-
return sanitize;
|
|
150
|
-
},
|
|
151
|
-
enumerable: false,
|
|
152
|
-
configurable: true
|
|
153
|
-
});
|
|
154
|
-
Object.defineProperty(GenericInlineTool.prototype, "shortcut", {
|
|
155
|
-
/**
|
|
156
|
-
* Set a shortcut
|
|
157
|
-
*/
|
|
158
|
-
get: function () {
|
|
159
|
-
return shortcut;
|
|
160
|
-
},
|
|
161
|
-
enumerable: false,
|
|
162
|
-
configurable: true
|
|
163
|
-
});
|
|
164
|
-
return GenericInlineTool;
|
|
165
|
-
}()),
|
|
166
|
-
/**
|
|
167
|
-
* Specifies Tool as Inline Toolbar Tool
|
|
168
|
-
*
|
|
169
|
-
* @return {boolean}
|
|
170
|
-
*/
|
|
171
|
-
_b.isInline = true,
|
|
172
|
-
_b;
|
|
173
|
-
};
|
|
174
|
-
export default createGenericInlineTool;
|
|
175
|
-
//# sourceMappingURL=tool.js.map
|