feat: easier templating

BREAKING CHANGE: specifying IDs of left/right editors is no longer supported. Instead, use just a single element and control contents programatically.

src/dom/ensureElement.js

@@ -0,0 +1,23 @@
+/**
+ * Search for element in parent and create it if it can't be found
+ * @param {*HTMLElement} parent
+ * @param {string} elClass Element class
+ *
+ * Returns ID of the element
+ */
+export default function ensureElement(parent, elClass) {
+  const guid = Math.random().toString(36).substr(2, 5);
+  const newId = `js-${elClass}-${guid}`;
+
+  const currentEl = parent.querySelector(`.${elClass}`);
+  if (currentEl) {
+    currentEl.id = currentEl.id || newId;
+    return currentEl.id;
+  }
+
+  const el = document.createElement('div');
+  parent.appendChild(el);
+  el.className = elClass;
+  el.id = newId;
+  return el.id;
+}

src/index.js

@@ -4,6 +4,7 @@ import debounce from 'lodash/debounce';
 import DiffMatchPatch from 'diff-match-patch';
 
 import getCurve from './visuals/getCurve';
+import ensureElement from './dom/ensureElement';
 
 const requireFunc = (ace.acequire || ace.require);
 
@@ -34,35 +35,53 @@ function AceDiff(options) {
     showConnectors: true,
     maxDiffs: 5000,
     left: {
-      id: 'acediff-left-editor',
+      id: null,
       content: null,
       mode: null,
       theme: null,
       editable: true,
       copyLinkEnabled: true,
     },
     right: {
-      id: 'acediff-right-editor',
+      id: null,
       content: null,
       mode: null,
       theme: null,
       editable: true,
       copyLinkEnabled: true,
     },
     classes: {
-      gutterID: 'acediff-gutter',
-      diff: 'acediff-diff',
-      connector: 'acediff-connector',
-      newCodeConnectorLink: 'acediff-new-code-connector-copy',
+      gutterID: 'acediff__gutter',
+      diff: 'acediff__diffLine',
+      connector: 'acediff__connector',
+      newCodeConnectorLink: 'acediff__newCodeConnector',
       newCodeConnectorLinkContent: '→',
-      deletedCodeConnectorLink: 'acediff-deleted-code-connector-copy',
+      deletedCodeConnectorLink: 'acediff__deletedCodeConnector',
       deletedCodeConnectorLinkContent: '←',
-      copyRightContainer: 'acediff-copy-right',
-      copyLeftContainer: 'acediff-copy-left',
+      copyRightContainer: 'acediff__copy--right',
+      copyLeftContainer: 'acediff__copy--left',
     },
     connectorYOffset: 0,
   }, options);
 
+  if (this.options.element === null) {
+    console.error('You need to specify an element for Ace-diff');
+    return;
+  }
+
+  const el = document.body.querySelector(this.options.element);
+
+  if (!el) {
+    console.error(`Can't find the specified element ${this.options.element}`);
+    return;
+  }
+
+  this.options.left.id = ensureElement(el, 'acediff__left');
+  this.options.right.id = ensureElement(el, 'acediff__right');
+  this.options.classes.gutterID = ensureElement(el, 'acediff__gutter');
+
+  el.innerHTML = `<div class="acediff__wrap">${el.innerHTML}</div>`;
+
   // instantiate the editors in an internal data structure
   // that will store a little info about the diffs and
   // editor content