Skip to content

Commit e03c6b4

Browse files
author
Wouter Coppieters
committed
Ensure raw text area is also populated in initializer
1 parent 3cfc695 commit e03c6b4

File tree

1 file changed

+146
-148
lines changed

1 file changed

+146
-148
lines changed

‎docs/index.html‎

Lines changed: 146 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -15,162 +15,160 @@
1515
}
1616
html, body{
1717
margin: 0;
18+
}
19+
.json-key {
20+
color: brown;
21+
}
22+
.json-value {
23+
color: navy;
24+
}
25+
.json-string {
26+
color: olive;
27+
}
28+
.content-area{
29+
height: 100vh;
30+
width: 100vw;
31+
display: flex;
32+
flex-wrap: wrap;
33+
}
34+
35+
.adf-output{
36+
flex: 1 1 50%;
37+
min-width: 300px;
38+
}
39+
.input-area{
40+
position: relative;
41+
flex: 1 1 50%;
42+
min-width: 300px;
43+
}
44+
45+
.btn-toggle{
46+
position: absolute;
47+
display: block;
48+
margin: auto;
49+
left: calc(50% - 45px);
50+
width: 90px;
51+
background: #51beff;
52+
border: none;
53+
padding: 5px 5px 10px 5px;
54+
color: white;
55+
font-weight: bold;
56+
border-radius: 0 0 15px 15px;
57+
cursor: pointer;
58+
z-index: 3;
59+
}
60+
61+
.hidden{
62+
display: none;
63+
}
64+
65+
66+
.input-raw, .input-rich{
67+
height: 100%;
68+
width: 100%;
69+
}
70+
.btn-toggle{
71+
background: #28a7f2;
72+
}
73+
74+
.input-rich.hidden + .tox-tinymce{
75+
display: none;
76+
}
77+
78+
79+
</style>
80+
<script defer type="module">
81+
import init, {convert} from "https://unpkg.com/htmltoadf@0.1.5/htmltoadf.js";
82+
83+
let editor;
84+
85+
const INITIAL_CONTENT = `
86+
<h1>Header 1</h1>
87+
<ol>
88+
<li>List Item 1</li>
89+
<li>List Item 2</li>
90+
<li>List Item 3</li>
91+
</ol>
92+
<p style='color: #F00; text-decoration: underline;'>Some colored text with <em>emphasis</em></p>
93+
`
94+
const inputRaw = document.querySelector('.input-raw');
95+
const inputRich = document.querySelector('.input-rich');
96+
const adfOutput = document.querySelector('.adf-output');
97+
const btnToggle = document.querySelector('.btn-toggle');
98+
99+
100+
const jsonFormatter = {
101+
replacer: function(match, pIndent, pKey, pVal, pEnd) {
102+
var key = '<span class=json-key>';
103+
var val = '<span class=json-value>';
104+
var str = '<span class=json-string>';
105+
var r = pIndent || '';
106+
if (pKey)
107+
r = r + '"'+key + pKey.replace(/[": ]/g, '') + '"</span>: ';
108+
if (pVal)
109+
r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
110+
return r + (pEnd || '');
111+
},
112+
prettyPrint: function(obj) {
113+
var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
114+
return JSON.stringify(obj, null, 3)
115+
.replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
116+
.replace(/</g, '&lt;').replace(/>/g, '&gt;')
117+
.replace(jsonLine, jsonFormatter.replacer);
18118
}
19-
.json-key {
20-
color: brown;
21-
}
22-
.json-value {
23-
color: navy;
24-
}
25-
.json-string {
26-
color: olive;
27-
}
28-
.content-area{
29-
height: 100vh;
30-
width: 100vw;
31-
display: flex;
32-
flex-wrap: wrap;
33-
}
119+
};
120+
121+
tinymce.init({
122+
selector:'.input-rich',
123+
plugins: 'table',
124+
toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | splitContent | table | forecolor backcolor ',
125+
setup: function(ed) {
126+
editor = ed;
127+
editor.on('keyup', () => {
128+
inputRaw.value = editor.getContent()
129+
output(editor.getContent())
130+
})
131+
editor.on('change', () => {
132+
inputRaw.value = editor.getContent()
133+
output(editor.getContent())
134+
})
34135

35-
.adf-output{
36-
flex: 1 1 50%;
37-
min-width: 300px;
38-
}
39-
.input-area{
40-
position: relative;
41-
flex: 1 1 50%;
42-
min-width: 300px;
43-
}
44136

45-
.btn-toggle{
46-
position: absolute;
47-
display: block;
48-
margin: auto;
49-
left: calc(50% - 45px);
50-
width: 90px;
51-
background: #51beff;
52-
border: none;
53-
padding: 5px 5px 10px 5px;
54-
color: white;
55-
font-weight: bold;
56-
border-radius: 0 0 15px 15px;
57-
cursor: pointer;
58-
z-index: 3;
59-
}
60-
61-
.hidden{
62-
display: none;
63-
}
64-
65-
66-
.input-raw, .input-rich{
67-
height: 100%;
68-
width: 100%;
69-
}
70-
.btn-toggle{
71-
background: #28a7f2;
72-
}
73-
74-
.input-rich.hidden + .tox-tinymce{
75-
display: none;
76-
}
77-
78-
79-
</style>
80-
<script defer type="module">
81-
import init, {convert} from "https://unpkg.com/htmltoadf@0.1.5/htmltoadf.js";
82-
83-
let editor;
84-
85-
const INITIAL_CONTENT = `
86-
<h1>Header 1</h1>
87-
<ol>
88-
<li>List Item 1</li>
89-
<li>List Item 2</li>
90-
<li>List Item 3</li>
91-
</ol>
92-
<p style='color: #F00; text-decoration: underline;'>
93-
Some colored text with <em>emphasis</em>
94-
</p>
95-
`
96-
const inputRaw = document.querySelector('.input-raw');
97-
const inputRich = document.querySelector('.input-rich');
98-
const adfOutput = document.querySelector('.adf-output');
99-
const btnToggle = document.querySelector('.btn-toggle');
100-
101-
102-
const jsonFormatter = {
103-
replacer: function(match, pIndent, pKey, pVal, pEnd) {
104-
var key = '<span class=json-key>';
105-
var val = '<span class=json-value>';
106-
var str = '<span class=json-string>';
107-
var r = pIndent || '';
108-
if (pKey)
109-
r = r + '"'+key + pKey.replace(/[": ]/g, '') + '"</span>: ';
110-
if (pVal)
111-
r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
112-
return r + (pEnd || '');
113-
},
114-
prettyPrint: function(obj) {
115-
var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
116-
return JSON.stringify(obj, null, 3)
117-
.replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
118-
.replace(/</g, '&lt;').replace(/>/g, '&gt;')
119-
.replace(jsonLine, jsonFormatter.replacer);
120-
}
121-
};
122-
123-
tinymce.init({
124-
selector:'.input-rich',
125-
plugins: 'table',
126-
toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | splitContent | table | forecolor backcolor ',
127-
setup: function(ed) {
128-
editor = ed;
129-
editor.on('keyup', () => {
130-
inputRaw.value = editor.getContent()
131-
output(editor.getContent())
132-
})
133-
editor.on('change', () => {
134-
inputRaw.value = editor.getContent()
135-
output(editor.getContent())
136-
})
137-
138-
139-
}
140-
})
141-
142-
inputRaw.addEventListener('keyup', event => {
143-
editor.setContent(event.target.value)
144-
output(event.target.value)
145-
})
146-
147-
btnToggle.addEventListener('click', () => {
148-
if(inputRaw.classList.contains('hidden')){
149-
inputRich.classList.add('hidden')
150-
inputRaw.classList.remove('hidden')
151-
btnToggle.innerText = "Show Rich"
152-
}else{
153-
inputRaw.classList.add('hidden')
154-
inputRich.classList.remove('hidden')
155-
btnToggle.innerText = "Show Raw"
156-
}
157-
})
158-
159-
function output(html){
160-
console.log("Output change")
161-
adfOutput.innerHTML = jsonFormatter.prettyPrint(JSON.parse(convert(html)))
162137
}
163-
164-
init().then(() => {
165-
editor.setContent(INITIAL_CONTENT)
166-
output(INITIAL_CONTENT)
167-
})
168-
</script>
138+
})
139+
140+
inputRaw.addEventListener('keyup', event => {
141+
editor.setContent(event.target.value)
142+
output(event.target.value)
143+
})
144+
145+
btnToggle.addEventListener('click', () => {
146+
if(inputRaw.classList.contains('hidden')){
147+
inputRich.classList.add('hidden')
148+
inputRaw.classList.remove('hidden')
149+
btnToggle.innerText = "Show Rich"
150+
}else{
151+
inputRaw.classList.add('hidden')
152+
inputRich.classList.remove('hidden')
153+
btnToggle.innerText = "Show Raw"
154+
}
155+
})
156+
157+
function output(html){
158+
adfOutput.innerHTML = jsonFormatter.prettyPrint(JSON.parse(convert(html)))
159+
}
160+
161+
init().then(() => {
162+
inputRaw.value = INITIAL_CONTENT
163+
editor.setContent(INITIAL_CONTENT)
164+
output(INITIAL_CONTENT)
165+
})
166+
</script>
169167

170168

171169
</head>
172170
<body>
173-
<a href="https://github.com/wouterken/htmltoadf" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
171+
<a href="https://github.com/wouterken/htmltoadf" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
174172
<main class='content-area'>
175173
<div class='input-area'>
176174
<button class='btn-toggle'>

0 commit comments

Comments
 (0)