Skip to content

Instantly share code, notes, and snippets.

@Deraen
Last active March 27, 2021 15:34
Show Gist options
  • Save Deraen/930022461005a9625f1b to your computer and use it in GitHub Desktop.
Save Deraen/930022461005a9625f1b to your computer and use it in GitHub Desktop.
ClojureScript goog.editor
(ns frontend.view.editor
(:require [reagent.core :as reagent]
[goog.dom :as dom])
(:import [goog.editor Field ContentEditableField Command]
[goog.ui.editor DefaultToolbar ToolbarController ToolbarFactory]
[goog.editor.plugins BasicTextFormatter RemoveFormatting ListTabHandler
SpacesTabHandler EnterHandler HeaderFormatter TableEditor]))
(defn editor-view []
(let [field-name (gensym)
editable (atom nil)]
(reagent/create-class
{:component-did-mount
(fn [this]
(let [field (doto (ContentEditableField. (str field-name "_content"))
(.registerPlugin (BasicTextFormatter.))
; Indent and deintent lists
(.registerPlugin (ListTabHandler.))
; TAB -> 4 spaces when not in list
(.registerPlugin (SpacesTabHandler.))
; Normalizes what happens when enter is pressed. Also
(.registerPlugin (EnterHandler.))
; Ctrl-1-4 shortcuts
(.registerPlugin (HeaderFormatter.))
; Tables
(.registerPlugin (TableEditor.)))
toolbar (DefaultToolbar.makeToolbar
#js [Command.BOLD Command.ITALIC
; FIXME: Doesn't work
; (doto (ToolbarFactory.makeMenuButton "" "Format" "Format")
; (ToolbarFactory.addFormatOption "H1" "H1"))
; (ToolbarFactory.makeToggleButton HeaderFormatter.HEADER_COMMAND.H1 "Header 1" "Header 1" )
; (ToolbarFactory.makeToggleButton HeaderFormatter.HEADER_COMMAND.H2 "Header 2" "Header 2" )
; FIXME: Use menu button for table actions?
(ToolbarFactory.makeButton TableEditor.COMMAND.TABLE "Table" "Table")
(ToolbarFactory.makeButton TableEditor.COMMAND.REMOVE_TABLE "Remove table" "Remove table")
(ToolbarFactory.makeButton TableEditor.COMMAND.INSERT_ROW_BEFORE "Insert row before" "Insert row before")
(ToolbarFactory.makeButton TableEditor.COMMAND.INSERT_ROW_AFTER "Insert row after" "Insert row after")
(ToolbarFactory.makeButton TableEditor.COMMAND.INSERT_COLUMN_BEFORE "Insert column before" "Insert column before")
(ToolbarFactory.makeButton TableEditor.COMMAND.INSERT_COLUMN_AFTER "Insert column after" "Insert column after")
(ToolbarFactory.makeButton TableEditor.COMMAND.REMOVE_ROWS "Remove row" "Remove row")
(ToolbarFactory.makeButton TableEditor.COMMAND.REMOVE_COLUMNS "Remove column" "Remove column")
(ToolbarFactory.makeButton TableEditor.COMMAND.MERGE_CELLS "Merge cells" "Merge cells")
(ToolbarFactory.makeButton TableEditor.COMMAND.SPLIT_CELL "Split cell" "Split cell")
]
(dom/getElement (str field-name "_toolbar")))]
(reset! editable field)
(ToolbarController. field toolbar)
(.makeEditable field)))
:component-will-unmount
(fn [this]
(if-let [field @editable]
(.makeUneditable field)))
:render
(fn []
[:div
[:div {:id (str field-name "_toolbar")}]
[:div {:id (str field-name "_content")
:style {:border "1px solid #ccc"
:height "400px"
:padding "15px"}}]])})))
@import (inline) "goog/css/common.css";
@import (inline) "goog/css/button.css";
@import (inline) "goog/css/dialog.css";
@import (inline) "goog/css/linkbutton.css";
@import (inline) "goog/css/menu.css";
@import (inline) "goog/css/menuitem.css";
@import (inline) "goog/css/menuseparator.css";
@import (inline) "goog/css/tab.css";
@import (inline) "goog/css/tabbar.css";
@import (inline) "goog/css/toolbar.css";
@import (inline) "goog/css/colormenubutton.css";
@import (inline) "goog/css/palette.css";
@import (inline) "goog/css/colorpalette.css";
@import (inline) "goog/css/editor/bubble.css";
@import (inline) "goog/css/editor/dialog.css";
@import (inline) "goog/css/editor/linkdialog.css";
@import (inline) "goog/css/editortoolbar.css";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment