diff --git a/assets/css/index.css b/assets/css/index.css index 91edc09..334834f 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -593,6 +593,7 @@ u { .blockquote { display: flex; + display: -webkit-box; } .blockquote blockquote { @@ -647,7 +648,7 @@ u { white-space: pre-wrap; } -.markup pre, .markup blockquote { +.markup pre, .markup > blockquote { max-width: 90%; } diff --git a/assets/js/index.js b/assets/js/index.js index 56c0bc5..817fdd4 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -76,7 +76,6 @@ window.onload = () => { gui = guiParent.querySelector('.gui:first-of-type'); window.editor = CodeMirror(elt => editorHolder.parentNode.replaceChild(elt, editorHolder), { value: JSON.stringify(json, null, 4), - extraKeys: { Tab: cm => cm.replaceSelection(" ", "end") }, gutters: ["CodeMirror-foldgutter", "CodeMirror-lint-markers"], scrollbarStyle: "overlay", mode: "application/json", @@ -84,6 +83,22 @@ window.onload = () => { matchBrackets: true, foldGutter: true, lint: true, + extraKeys: { + // Make tabs four spaces long instead of the default two. + Tab: cm => cm.replaceSelection(" ", "end"), + // Fill in indent spaces on a new line when enter (return) key is pressed. + Enter: _ => { + let cur = editor.getCursor(), end = editor.getLine(cur.line), + leadingSpaces = end.replace(/\S($|.)+/g, '') || ' \n', nextLine = editor.getLine(cur.line + 1); + if ((nextLine === undefined || !nextLine.trim()) && !end.substr(cur.ch).trim()) + editor.replaceRange('\n', { line: cur.line, ch: cur.ch }); + else + editor.replaceRange(`\n${end.endsWith('{') ? leadingSpaces + ' ' : leadingSpaces}`, { + line: cur.line, + ch: cur.ch + }); + }, + } }); editor.focus(); @@ -156,8 +171,7 @@ window.onload = () => { if (data) el.innerHTML = data; el.style.display = displayType || "unset"; }, hide = el => el.style.removeProperty('display'), - imgSrc = (elm, src, remove) => remove ? elm.style.removeProperty('content') : elm.style.content = `url(${src})`, - toObj = jsonString => JSON.parse(jsonString.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g, (x, y) => y ? "" : x)); + imgSrc = (elm, src, remove) => remove ? elm.style.removeProperty('content') : elm.style.content = `url(${src})`; buildGui = (object, opts) => { gui.innerHTML = `

Message content

@@ -590,10 +604,12 @@ window.onload = () => { colNum = 1; let len = e.fields.filter(f => f.inline).length; if (len === 2 || (len > 3 && len % 2 !== 0)) { - let children = Array.from(embedFields.children), arr = children.filter(x => x === children[len] || x === children[len - 1]); - arr[0] && (arr[0].style.gridColumn = '1 / 7'); - arr[1] && (arr[1].style.gridColumn = '7 / 13'); - } + let children = embedFields.children; + children[0] && (children[0].style.gridColumn = '1 / 7'); + children[1] && (children[1].style.gridColumn = '7 / 13'); + embed.style.maxWidth = "408px"; + } else + embed.style.removeProperty('max-width'); display(embedFields, undefined, 'grid'); } else hide(embedFields); embedCont.classList.remove('empty'); @@ -607,7 +623,13 @@ window.onload = () => { } editor.on('change', editor => { - try { update(toObj(editor.getValue())); } + //// Autofill when " key is typed on new line + // let line = editor.getCursor().line, text = editor.getLine(line) + // if (text.trim() === '"'){ + // editor.replaceRange(text.trim() + ': ', { line, ch: line.length }); + // editor.setCursor(line, text.length) + // } + try { update(JSON.parse(editor.getValue())); } catch (e) { if (editor.getValue()) return; embedCont.classList.add('empty'); @@ -646,7 +668,7 @@ window.onload = () => { document.querySelector('.botText').style.removeProperty('top'); document.querySelector('.opt.gui').addEventListener('click', () => { - json = toObj(editor.getValue() || '{}'); + json = JSON.parse(editor.getValue() || '{}'); buildGui(json, { activate: activeFields }); document.body.classList.add('gui'); activeFields = null; diff --git a/assets/media/gui.png b/assets/media/gui.png index 9bb91ec..c33913d 100644 Binary files a/assets/media/gui.png and b/assets/media/gui.png differ diff --git a/assets/media/json.png b/assets/media/json.png index 52f60d2..029fc1d 100644 Binary files a/assets/media/json.png and b/assets/media/json.png differ