Added indent type, indent size and wrap mode to editors

internal/web/run.go

@@ -16,13 +16,15 @@ import (
  "opengist/internal/config"
  "opengist/internal/git"
  "opengist/internal/models"
+ "os"
  "path/filepath"
  "regexp"
  "strconv"
  "strings"
  "time"
 )
 
+var devAssets = os.Getenv("DEV_ASSETS") == "1"
 var store *sessions.CookieStore
 var re = regexp.MustCompile("[^a-z0-9]+")
 var fm = template.FuncMap{
@@ -75,6 +77,9 @@ var fm = template.FuncMap{
  return fmt.Sprintf("%x", md5.Sum([]byte(strings.ToLower(strings.TrimSpace(email)))))
  },
  "asset": func(jsfile string) string {
+ if devAssets {
+ return "http:https://localhost:16157/" + jsfile
+ }
  return "/" + manifestEntries[jsfile].File
  },
 }

package.json

@@ -10,6 +10,9 @@
  "devDependencies": {
  "@codemirror/commands": "^6.2.2",
  "@codemirror/lang-javascript": "^6.1.4",
+ "@codemirror/language": "^6.6.0",
+ "@codemirror/state": "^6.2.0",
+ "@codemirror/text": "^0.19.6",
  "@codemirror/view": "^6.9.3",
  "@tailwindcss/forms": "^0.5.3",
  "@tailwindcss/typography": "^0.5.9",

public/editor.js

@@ -1,5 +1,6 @@
-import {EditorView, keymap, gutter, lineNumbers} from "@codemirror/view"
-import {indentWithTab} from "@codemirror/commands"
+import {EditorView, gutter, keymap, lineNumbers} from "@codemirror/view"
+import {Compartment, EditorState, Facet, SelectionRange} from "@codemirror/state"
+import {indentLess} from "@codemirror/commands";
 
 EditorView.theme({}, {dark: true})
 
@@ -8,53 +9,125 @@ let editorsParentdom = document.getElementById('editors')
 let allEditorsdom = document.querySelectorAll('#editors > .editor')
 let firstEditordom = allEditorsdom[0]
 
+const txtFacet = Facet.define({
+ combine(values) {
+ return values[0]
+ }
+})
+let indentSize = new Compartment, wrapMode = new Compartment, indentType = new Compartment
+
 const newEditor = (dom, value = '') => {
- return new EditorView({
+ let editor = new EditorView({
  doc: value,
+ parent: dom,
  extensions: [
  lineNumbers(), gutter({class: "cm-mygutter"}),
- keymap.of([indentWithTab]),
- ],
- parent: dom
+ keymap.of([{key: "Tab", run: customIndentMore, shift: indentLess}]),
+ indentSize.of(EditorState.tabSize.of(2)),
+ wrapMode.of([]),
+ indentType.of(txtFacet.of("space")),
+ ]
  })
-}
 
-const eventOnDrop = (e) => {
- e.preventDefault(); // prevent the browser from opening the dropped file
- e.target.closest('.editor').querySelector('input.form-filename').value = e.dataTransfer.files[0].name
-}
+ dom.querySelector('.editor-indent-type').onchange = (e) => {
+  let newTabType = e.target.value
+  setIndentType(editor, !['tab', 'space'].includes(newTabType) ? 'space' : newTabType)
+ }
 
-document.onsubmit = () => {
- window.onbeforeunload = null;
-}
+ dom.querySelector('.editor-indent-size').onchange = (e) => {
+ let newTabSize = parseInt(e.target.value)
+ setIndentSize(editor, ![2, 4, 8].includes(newTabSize) ? 2 : newTabSize)
+ }
 
-let arr = [...allEditorsdom]
-arr.forEach(el => {
- // in case we edit the gist contents
- let currEditor = newEditor(el, el.querySelector('.form-filecontent').value)
- editorsjs.push(currEditor)
+ dom.querySelector('.editor-wrap-mode').onchange = (e) => {
+ let newWrapMode = e.target.value
+ setLineWrapping(editor, newWrapMode === 'soft')
+ }
 
- currEditor.dom.addEventListener("input", function inputConfirmLeave() {
- if (!currEditor.inView) return; // skip events outside the viewport
+ dom.addEventListener("drop", (e) => {
+ e.preventDefault(); // prevent the browser from opening the dropped file
+ e.target.closest('.editor').querySelector('input.form-filename').value = e.dataTransfer.files[0].name
+ });
 
- currEditor.dom.removeEventListener("input", inputConfirmLeave);
+ // remove editor on delete
+ let deleteBtns = dom.querySelector('button.delete-file')
+ if (deleteBtns !== null) {
+ deleteBtns.onclick = () => {
+ editorsjs.splice(editorsjs.indexOf(editor), 1);
+ dom.remove()
+ }
+ }
+
+ editor.dom.addEventListener("input", function inputConfirmLeave() {
+ if (!editor.inView) return; // skip events outside the viewport
+
+ editor.dom.removeEventListener("input", inputConfirmLeave);
  window.onbeforeunload = () => {
  return 'Are you sure you want to quit?';
  }
  });
 
- currEditor.dom.addEventListener("drop", eventOnDrop);
+ return editor;
+}
 
- // remove editor on delete
- let deleteBtns = el.querySelector('button.delete-file')
- if (deleteBtns !== null) {
+function getIndentation(state) {
+ if (indentType.get(state).value === 'tab') {
+ return '\t';
+ }
+ return ' '.repeat(indentSize.get(state).value);
+}
 
- deleteBtns.onclick = () => {
+function customIndentMore({state, dispatch}) {
+ let indentation = getIndentation(state)
+ dispatch({
+ ...state.update(changeBySelectedLine(state, (line, changes) => {
+ changes.push({from: state.selection.ranges[0].from, insert: indentation})
+ })), selection: {
+ anchor: state.selection.ranges[0].from + indentation.length,
+ head: state.selection.ranges[0].from + indentation.length,
+ }
+ })
+ return true
+}
 
- editorsjs.splice(editorsjs.indexOf(currEditor), 1);
- el.remove()
+function changeBySelectedLine(state, f) {
+ let atLine = -1
+ return state.changeByRange(range => {
+ let changes = []
+ for (let line = state.doc.lineAt(range.from); ;) {
+ if (line.number > atLine) {
+ f(line, changes)
+ atLine = line.number
+ }
+ if (range.to <= line.to) break
+ line = state.doc.lineAt(line.number + 1)
  }
+ let changeSet = state.changes(changes)
+ return {changes, range: new SelectionRange(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1))}
+ })
+}
+
+function setIndentType(view, type) {
+ view.dispatch({effects: indentType.reconfigure(txtFacet.of(type))})
+}
+
+function setIndentSize(view, size) {
+ view.dispatch({effects: indentSize.reconfigure(EditorState.tabSize.of(size))})
+}
+
+function setLineWrapping(view, enable) {
+ if (enable) {
+ view.dispatch({effects: wrapMode.reconfigure(EditorView.lineWrapping)})
+ } else {
+ view.dispatch({effects: wrapMode.reconfigure([])})
  }
+}
+
+let arr = [...allEditorsdom]
+arr.forEach(el => {
+ // in case we edit the gist contents
+ let currEditor = newEditor(el, el.querySelector('.form-filecontent').value)
+ editorsjs.push(currEditor)
 })
 
 document.getElementById('add-file').onclick = () => {
@@ -70,8 +143,6 @@ document.getElementById('add-file').onclick = () => {
  // creating the new codemirror editor and append it in the editor div
  editorsjs.push(newEditor(newEditorDom))
  editorsParentdom.append(newEditorDom)
- editorsParentdom.addEventListener("drop", eventOnDrop);
-
 }
 
 document.querySelector('form#create').onsubmit = () => {
@@ -80,3 +151,7 @@ document.querySelector('form#create').onsubmit = () => {
  e.value = encodeURIComponent(editorsjs[j++].state.doc.toString())
  })
 }
+
+document.onsubmit = () => {
+ window.onbeforeunload = null;
+}

templates/base/gist_header.html

@@ -164,7 +164,7 @@ <h1 class="text-2xl font-bold leading-tight break-all">
  </div>
  </div>
 
- <a href="/{{ .gist.User.Username }}/{{ .gist.Uuid }}/archive/{{ .revision }}" class="whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-800 px-2.5 py-2 text-xs font-medium text-white shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
+ <a href="/{{ .gist.User.Username }}/{{ .gist.Uuid }}/archive/{{ .revision }}" class="whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-800 px-2.5 py-2 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500 leading-3">
  Download ZIP</a>
  </div>
  </div>

templates/pages/create.html

@@ -24,10 +24,31 @@ <h1 class="text-2xl font-bold leading-tight text-slate-300">
  </div>
  <div id="editors" class="space-y-4">
  <div class="rounded-md border border-1 border-gray-700 editor">
- <div class="border-b-1 border-gray-700 bg-gray-800 my-auto">
+ <div class="border-b-1 border-gray-700 bg-gray-800 my-auto flex">
  <p class="mx-2 my-2 inline-flex">
  <input type="text" name="name" placeholder="Filename with extension" style="line-height: 0.05em" class="form-filename bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-700 rounded-md">
  </p>
+ <div class="mx-2 my-2 inline-flex ml-auto space-x-2">
+ <select class="editor-indent-type whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
+ <optgroup label="Indent mode">
+ <option value="space">Space</option>
+ <option value="tab">Tabs</option>
+ </optgroup>
+ </select>
+ <select class="editor-indent-size whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
+ <optgroup label="Indent size">
+ <option value="2">2</option>
+ <option value="4">4</option>
+ <option value="8">8</option>
+ </optgroup>
+ </select>
+ <select class="editor-wrap-mode whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
+ <optgroup label="Wrap mode">
+ <option value="no">No wrap</option>
+ <option value="soft">Soft wrap</option>
+ </optgroup>
+ </select>
+ </div>
  </div>
  <input type="hidden" value="" name="content" class="form-filecontent">
  </div>

templates/pages/edit.html

@@ -55,7 +55,7 @@ <h1 class="text-2xl font-bold leading-tight text-slate-300">
  <div id="editors" class="space-y-4">
  {{ range $file := .files }}
  <div class="rounded-md border border-1 border-gray-700 editor">
- <div class="border-b-1 border-gray-700 bg-gray-800 my-auto">
+ <div class="border-b-1 border-gray-700 bg-gray-800 my-auto flex">
  <p class="mx-2 my-2 inline-flex">
  <input type="text" value="{{ $file.Filename }}" name="name" placeholder="Filename with extension" style="line-height: 0.05em; z-index: 99999" class="form-filename bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-700 rounded-l-md">
  <button style="line-height: 0.05em" class="delete-file -ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-700 text-sm font-medium rounded-r-md text-slate-300 bg-gray-800 hover:bg-gray-900 focus:outline-none" type="button">
@@ -64,6 +64,27 @@ <h1 class="text-2xl font-bold leading-tight text-slate-300">
  </svg>
  </button>
  </p>
+ <div class="mx-2 my-2 inline-flex ml-auto space-x-2">
+ <select class="editor-indent-type whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
+ <optgroup label="Indent mode">
+ <option value="space">Space</option>
+ <option value="tab">Tabs</option>
+ </optgroup>
+ </select>
+ <select class="editor-indent-size whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
+ <optgroup label="Indent size">
+ <option value="2">2</option>
+ <option value="4">4</option>
+ <option value="8">8</option>
+ </optgroup>
+ </select>
+ <select class="editor-wrap-mode whitespace-nowrap text-slate-300 rounded border border-gray-600 bg-gray-900 pr-8 text-xs font-medium shadow-sm hover:bg-gray-700 hover:border-gray-500 hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">
+ <optgroup label="Wrap mode">
+ <option value="no">No wrap</option>
+ <option value="soft">Soft wrap</option>
+ </optgroup>
+ </select>
+ </div>
  </div>
  <input type="hidden" value="{{ $file.Content }}" name="content" class="form-filecontent">
  </div>