diff --git a/css/pell.css b/css/pell.css
index a0e6a1c..f3c2e71 100644
--- a/css/pell.css
+++ b/css/pell.css
@@ -3,6 +3,7 @@
box-sizing: border-box; }
.pell-content {
+ background-color: #FFF;
box-sizing: border-box;
height: 300px;
outline: 0;
@@ -10,7 +11,7 @@
padding: 10px; }
.pell-actionbar {
- background-color: #FFF;
+
border-bottom: 1px solid rgba(10, 10, 10, 0.1); }
.pell-button {
diff --git a/index.html b/index.html
index 1c2aa36..215faa0 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,7 @@
+
diff --git a/js/2.0.0/buildForm.js b/js/2.0.0/buildForm.js
index 083e910..799dae7 100644
--- a/js/2.0.0/buildForm.js
+++ b/js/2.0.0/buildForm.js
@@ -1,4 +1,6 @@
import { getFileName } from "./storage.js";
+import pell from "./pell.js"
+import { inputRead } from "./scripts.js";
function transformTemplateObject(objects) {
let form = document.createElement("FORM");
@@ -106,7 +108,6 @@ function buildField(obj, form, sidebarList) {
if (ltPlaceholder !== undefined) {
let textarea = document.createElement("textarea");
textarea.setAttribute("name", obj.word.replace(/ /g, "_"));
- textarea.setAttribute("id", obj.word.replace(/ /g, "_"));
textarea.setAttribute("cols", "100");
textarea.setAttribute("rows", "15");
textarea.classList.add("w3-input");
@@ -115,6 +116,7 @@ function buildField(obj, form, sidebarList) {
divContainer.classList.add("w3-center");
label.innerHTML = obj.word;
div.appendChild(label);
+ buildLongTextInput(div, textarea, label);
div.appendChild(textarea);
}
}
@@ -281,6 +283,7 @@ function buildField(obj, form, sidebarList) {
divContainer.classList.remove("w3-half");
divContainer.classList.add("w3-center");
div.appendChild(label);
+ buildLongTextInput(div, textarea, label);
div.appendChild(textarea);
break;
case "current_time":
@@ -398,6 +401,56 @@ function buildSidebarList(obj, sidebarList) {
sidebarList.appendChild(sidebarListItem);
}
+function buildLongTextInput(source, textarea, label) {
+
+ if (activeState.settings.enablePell == "false") return;
+ //hide default textarea
+ textarea.style.display = "none";
+ label.style.display = "none";
+
+ let title = document.createElement("span");
+ title.innerText = label.innerText;
+
+ const editor = pell.init({
+ element: source,
+ defaultParagraphSeparator: "br",
+ actions: [
+ "bold",
+ "italic",
+ "underline",
+ "heading1",
+ "heading2",
+ {
+ name: 'ulist',
+ icon: 'L'
+ },
+ "olist"
+ ],
+ onChange: function (html) {
+ textarea.value = html;
+ },
+ });
+
+ let actionBar = editor.getElementsByClassName("pell-actionbar")[0];
+ let content = editor.getElementsByClassName("pell-content")[0];
+
+ let actionBarElements = actionBar.getElementsByClassName("pell-button");
+ let newActionBarElements = [];
+ for (let actionBarElement of actionBarElements ) {
+ actionBarElement.classList.add("w3-right");
+ newActionBarElements.push(actionBarElement);
+ }
+ //reverse actionbar back to org order
+ actionBar.innerHTML = "";
+ for (let newActionBarElement of newActionBarElements.reverse()) {
+ actionBar.appendChild(newActionBarElement);
+ }
+
+ actionBar.classList.add("w3-container");
+ actionBar.style.paddingLeft = "0px";
+ actionBar.appendChild(title);
+}
+
function userFileNameDiv(fileName) {
let divContainer = document.createElement("DIV");
divContainer.classList.add("w3-third", "w3-container");
diff --git a/js/2.0.0/init.js b/js/2.0.0/init.js
index 760c935..148579d 100644
--- a/js/2.0.0/init.js
+++ b/js/2.0.0/init.js
@@ -30,7 +30,8 @@ window.activeState = {
font: "Arial",
fontSize: "10px",
notifierPause: 1,
- persistentStorage: "false"
+ persistentStorage: "false",
+ enablePell: "false",
},
templates: [],
templateObjectsPurified: [],
diff --git a/js/2.0.0/pell.js b/js/2.0.0/pell.js
index 36e2c22..014e01a 100644
--- a/js/2.0.0/pell.js
+++ b/js/2.0.0/pell.js
@@ -1,7 +1,7 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
- (factory((global.pell = {})));
+ (factory((globalThis.pell = {})));
}(this, (function (exports) { 'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -222,3 +222,5 @@ exports['default'] = pell;
Object.defineProperty(exports, '__esModule', { value: true });
})));
+
+export default pell;
\ No newline at end of file
diff --git a/js/2.0.0/scripts.js b/js/2.0.0/scripts.js
index c8aeebd..bb1b6d3 100644
--- a/js/2.0.0/scripts.js
+++ b/js/2.0.0/scripts.js
@@ -176,6 +176,9 @@ export const inputRead = {
read: function (event) {
this.event = event;
this.source = event.srcElement.id;
+ if (event.target.className == "pell-content") {
+ this.source = event.target.parentElement.getElementsByTagName("textarea")[0].id;
+ }
let previousContent = this.inputContent;
let key = (event.key !=undefined) ? event.key : "";
let contentElement = document.getElementById(this.source);