diff --git a/js/ckeditor5_plugins/ckeditor_templates/src/ckeditorTemplatesCommand.js b/js/ckeditor5_plugins/ckeditor_templates/src/ckeditorTemplatesCommand.js
index 86ccc61..a4ab56b 100644
--- a/js/ckeditor5_plugins/ckeditor_templates/src/ckeditorTemplatesCommand.js
+++ b/js/ckeditor5_plugins/ckeditor_templates/src/ckeditorTemplatesCommand.js
@@ -1,4 +1,4 @@
-import { Command } from 'ckeditor5/src/core';
+import { Command } from "ckeditor5/src/core";
 
 /**
  * Command for injecting code into the CKEditor.
@@ -8,8 +8,18 @@ export default class CKEditorTemplatesCommand extends Command {
    * @inheritdoc
    */
   refresh() {
-    // The command can be executed whenever the editor is not in read-only mode.
-    this.isEnabled = !this.editor.isReadOnly;
+    const { model } = this.editor;
+    const { selection } = model.document;
+
+    // Determine if the cursor (selection) is in a position where adding a
+    // simpleBox is permitted. This is based on the schema of the model(s)
+    // currently containing the cursor.
+    const allowedIn = model.schema.findAllowedParent(
+      selection.getFirstPosition(),
+      "ckeditorTemplates"
+    );
+
+    this.isEnabled = allowedIn !== null;
   }
 
   /**
@@ -17,14 +27,37 @@ export default class CKEditorTemplatesCommand extends Command {
    */
   execute(htmlCode, replace) {
     const editor = this.editor;
-    editor.model.change(writer => {
+    editor.model.change((writer) => {
       if (replace) {
-        editor.data.set(htmlCode);
+        editor.data.set(`
+          <section class="ckeditor-template-wrapper">
+            <div class="ckeditor-template-content">
+              ${htmlCode}
+            </div>
+          </section>
+        `);
       } else {
         const viewFragment = editor.data.processor.toView(htmlCode);
         const modelFragment = editor.data.toModel(viewFragment);
-        editor.model.insertContent(modelFragment);
+        editor.model.insertContent(createSimpleBox(writer, modelFragment));
       }
     });
   }
 }
+
+function createSimpleBox(writer, modelFragment) {
+  // Create instances of the three elements registered with the editor in
+  // simpleboxediting.js.
+  const ckeditorTemplates = writer.createElement("ckeditorTemplates");
+  const ckeditorTemplateContent = writer.createElement(
+    "ckeditorTemplateContent"
+  );
+
+  // Append the title and description elements to the simpleBox, which matches
+  // the parent/child relationship as defined in their schemas.
+  writer.append(ckeditorTemplateContent, ckeditorTemplates);
+  writer.append(modelFragment, ckeditorTemplateContent);
+
+  // Return the element to be added to the editor.
+  return ckeditorTemplates;
+}
diff --git a/js/ckeditor5_plugins/ckeditor_templates/src/ckeditorTemplatesEditing.js b/js/ckeditor5_plugins/ckeditor_templates/src/ckeditorTemplatesEditing.js
index fc5feed..0e9fde2 100644
--- a/js/ckeditor5_plugins/ckeditor_templates/src/ckeditorTemplatesEditing.js
+++ b/js/ckeditor5_plugins/ckeditor_templates/src/ckeditorTemplatesEditing.js
@@ -1,6 +1,7 @@
-import { Plugin } from 'ckeditor5/src/core';
-import { Widget } from 'ckeditor5/src/widget';
-import CKEditorTemplatesCommand from './ckeditorTemplatesCommand';
+import { Plugin } from "ckeditor5/src/core";
+import { toWidget, toWidgetEditable } from "ckeditor5/src/widget";
+import { Widget } from "ckeditor5/src/widget";
+import CKEditorTemplatesCommand from "./ckeditorTemplatesCommand";
 
 /**
  * Handles the plugin functionality.
@@ -18,10 +19,108 @@ export default class CKEditorTemplatesEditing extends Plugin {
    * @inheritdoc
    */
   init() {
+    this._defineSchema();
+    this._defineConverters();
     this.editor.commands.add(
-      'ckeditorTemplates',
+      "ckeditorTemplates",
       new CKEditorTemplatesCommand(this.editor)
     );
   }
 
+  /*
+   * This registers the structure that will be seen by CKEditor 5 as
+   *
+   * The logic in _defineConverters() will determine how this is converted to
+   * markup.
+   */
+  _defineSchema() {
+    // Schemas are registered via the central `editor` object.
+    const schema = this.editor.model.schema;
+
+    schema.register("ckeditorTemplates", {
+      // Behaves like a self-contained object (e.g. an image).
+      isObject: true,
+      // Allow in places where other blocks are allowed (e.g. directly in the root).
+      allowWhere: '$block',
+    });
+
+    schema.register("ckeditorTemplateContent", {
+      isLimit: true,
+      allowIn: 'ckeditorTemplates',
+      allowContentOf: '$root',
+    });
+
+    schema.addChildCheck((context, childDefinition) => {
+      // Disallow ckeditorTemplates inside ckeditorTemplates.
+      if (
+        context.endsWith("ckeditorTemplateContent") &&
+        childDefinition.name === "ckeditorTemplates"
+      ) {
+        return false;
+      }
+    });
+  }
+  /**
+   * Converters determine how CKEditor 5 models are converted into markup and
+   * vice-versa.
+   */
+  _defineConverters() {
+    // Converters are registered via the central editor object.
+    const { conversion } = this.editor;
+
+    conversion.for("upcast").elementToElement({
+      model: "ckeditorTemplates",
+      view: {
+        name: "section",
+        classes: "ckeditor-template-wrapper",
+      },
+    });
+
+    conversion.for("upcast").elementToElement({
+      model: "ckeditorTemplateContent",
+      view: {
+        name: "div",
+        classes: "ckeditor-template-content",
+      },
+    });
+
+    conversion.for("dataDowncast").elementToElement({
+      model: "ckeditorTemplates",
+      view: {
+        name: "section",
+        classes: "ckeditor-template-wrapper",
+      },
+    });
+
+    conversion.for("dataDowncast").elementToElement({
+      model: "ckeditorTemplateContent",
+      view: {
+        name: "div",
+        classes: "ckeditor-template-content",
+      },
+    });
+
+    conversion.for("editingDowncast").elementToElement({
+      model: "ckeditorTemplates",
+      view: (modelElement, { writer: viewWriter }) => {
+        const section = viewWriter.createContainerElement("section", {
+          class: "ckeditor-template-wrapper",
+        });
+
+        return toWidget(section, viewWriter, {
+          label: "Ckeditor template widget",
+        });
+      },
+    });
+
+    conversion.for("editingDowncast").elementToElement({
+      model: "ckeditorTemplateContent",
+      view: (modelElement, { writer: viewWriter }) => {
+        const div = viewWriter.createEditableElement("div", {
+          class: "ckeditor-template-content",
+        });
+        return toWidgetEditable(div, viewWriter);
+      },
+    });
+  }
 }
diff --git a/js/dist/ckeditorTemplates.js b/js/dist/ckeditorTemplates.js
index 9edffcd..66c5529 100644
--- a/js/dist/ckeditorTemplates.js
+++ b/js/dist/ckeditorTemplates.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.ckeditorTemplates=t())}(self,(()=>(()=>{var e={"ckeditor5/src/core.js":(e,t,r)=>{e.exports=r("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":(e,t,r)=>{e.exports=r("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/widget.js":(e,t,r)=>{e.exports=r("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function r(o){var s=t[o];if(void 0!==s)return s.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,r),i.exports}r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var o={};return(()=>{"use strict";r.d(o,{default:()=>a});var e=r("ckeditor5/src/core.js"),t=r("ckeditor5/src/ui.js");class s extends e.Plugin{init(){const e=this.editor,r=this.editor.config.get("ckeditorTemplates");r&&r.openDialog&&r.dialogSettings&&r.dialogUrl&&e.ui.componentFactory.add("ckeditorTemplates",(o=>{const s=e.commands.get("ckeditorTemplates"),i=new t.ButtonView(o);return i.set({label:Drupal.t("Templates"),icon:'<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" id="templates" data-name="Line Color" class="icon line-color" viewBox="5 2 15 20"><path id="secondary" d="M15,17H9m0-4h6M9,9h6" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: square; stroke-linejoin: square; stroke-width: 1;"/><path id="primary" d="M6,21a0,0,0,0,0-0-0V7A0,0,0,0,0,6,3h8l5,4V21a0,0,0,0,0-0,0Z" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: square; stroke-linejoin: square; stroke-width: 1;"/></svg>\n',tooltip:!0}),i.bind("isOn","isEnabled").to(s,"value","isEnabled"),this.listenTo(i,"execute",(()=>{const t=r.dialogUrl,o=r.dialogSettings;r.openDialog(t,(({htmlCode:t,replace:r})=>{e.execute("ckeditorTemplates",t,r)}),o)})),i}))}}var i=r("ckeditor5/src/widget.js");class d extends e.Command{refresh(){this.isEnabled=!this.editor.isReadOnly}execute(e,t){const r=this.editor;r.model.change((o=>{if(t)r.data.set(e);else{const t=r.data.processor.toView(e),o=r.data.toModel(t);r.model.insertContent(o)}}))}}class l extends e.Plugin{static get requires(){return[i.Widget]}init(){this.editor.commands.add("ckeditorTemplates",new d(this.editor))}}class n extends e.Plugin{static get requires(){return[s,l]}static get pluginName(){return"ckeditorTemplates"}}const a={CKEditorTemplates:n}})(),o=o.default})()));
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.ckeditorTemplates=t())}(self,(()=>(()=>{var e={"ckeditor5/src/core.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/widget.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function o(r){var i=t[r];if(void 0!==i)return i.exports;var s=t[r]={exports:{}};return e[r](s,s.exports,o),s.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var r={};return(()=>{"use strict";o.d(r,{default:()=>a});var e=o("ckeditor5/src/core.js"),t=o("ckeditor5/src/ui.js");class i extends e.Plugin{init(){const e=this.editor,o=this.editor.config.get("ckeditorTemplates");o&&o.openDialog&&o.dialogSettings&&o.dialogUrl&&e.ui.componentFactory.add("ckeditorTemplates",(r=>{const i=e.commands.get("ckeditorTemplates"),s=new t.ButtonView(r);return s.set({label:Drupal.t("Templates"),icon:'<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" id="templates" data-name="Line Color" class="icon line-color" viewBox="5 2 15 20"><path id="secondary" d="M15,17H9m0-4h6M9,9h6" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: square; stroke-linejoin: square; stroke-width: 1;"/><path id="primary" d="M6,21a0,0,0,0,0-0-0V7A0,0,0,0,0,6,3h8l5,4V21a0,0,0,0,0-0,0Z" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: square; stroke-linejoin: square; stroke-width: 1;"/></svg>\n',tooltip:!0}),s.bind("isOn","isEnabled").to(i,"value","isEnabled"),this.listenTo(s,"execute",(()=>{const t=o.dialogUrl,r=o.dialogSettings;o.openDialog(t,(({htmlCode:t,replace:o})=>{e.execute("ckeditorTemplates",t,o)}),r)})),s}))}}var s=o("ckeditor5/src/widget.js");class n extends e.Command{refresh(){const{model:e}=this.editor,{selection:t}=e.document,o=e.schema.findAllowedParent(t.getFirstPosition(),"ckeditorTemplates");this.isEnabled=null!==o}execute(e,t){const o=this.editor;o.model.change((r=>{if(t)o.data.set(`\n          <section class="ckeditor-template-wrapper">\n            <div class="ckeditor-template-content">\n              ${e}\n            </div>\n          </section>\n        `);else{const t=o.data.processor.toView(e),i=o.data.toModel(t);o.model.insertContent(function(e,t){const o=e.createElement("ckeditorTemplates"),r=e.createElement("ckeditorTemplateContent");return e.append(r,o),e.append(t,r),o}(r,i))}}))}}class l extends e.Plugin{static get requires(){return[s.Widget]}init(){this._defineSchema(),this._defineConverters(),this.editor.commands.add("ckeditorTemplates",new n(this.editor))}_defineSchema(){const e=this.editor.model.schema;e.register("ckeditorTemplates",{isObject:!0,allowWhere:"$block"}),e.register("ckeditorTemplateContent",{isLimit:!0,allowIn:"ckeditorTemplates",allowContentOf:"$root"}),e.addChildCheck(((e,t)=>{if(e.endsWith("ckeditorTemplateContent")&&"ckeditorTemplates"===t.name)return!1}))}_defineConverters(){const{conversion:e}=this.editor;e.for("upcast").elementToElement({model:"ckeditorTemplates",view:{name:"section",classes:"ckeditor-template-wrapper"}}),e.for("upcast").elementToElement({model:"ckeditorTemplateContent",view:{name:"div",classes:"ckeditor-template-content"}}),e.for("dataDowncast").elementToElement({model:"ckeditorTemplates",view:{name:"section",classes:"ckeditor-template-wrapper"}}),e.for("dataDowncast").elementToElement({model:"ckeditorTemplateContent",view:{name:"div",classes:"ckeditor-template-content"}}),e.for("editingDowncast").elementToElement({model:"ckeditorTemplates",view:(e,{writer:t})=>{const o=t.createContainerElement("section",{class:"ckeditor-template-wrapper"});return(0,s.toWidget)(o,t,{label:"Ckeditor template widget"})}}),e.for("editingDowncast").elementToElement({model:"ckeditorTemplateContent",view:(e,{writer:t})=>{const o=t.createEditableElement("div",{class:"ckeditor-template-content"});return(0,s.toWidgetEditable)(o,t)}})}}class d extends e.Plugin{static get requires(){return[i,l]}static get pluginName(){return"ckeditorTemplates"}}const a={CKEditorTemplates:d}})(),r=r.default})()));
\ No newline at end of file
