dom elements

Author: Dylan Just

package.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/tinymce/tinymce-code-tutorial#readme",
   "dependencies": {
+    "@ephox/dom-globals": "^3.9.5",
     "@ephox/katamari": "^6.1.2",
     "@ephox/sugar": "^6.1.3"
   },

src/main/ts/Exercise2ArrayFunctions.ts

@@ -1,5 +1,8 @@
 import { Arr, Option as Optional } from '@ephox/katamari';
 
+// TODO: remove when we upgrade this tutorial to TinyMCE 5
+import { console } from '@ephox/dom-globals';
+
 /*
 Katamari is our library for general-purpose functions and FP basics.
 Its array module "Arr" is very handy, so let's explore it.

src/main/ts/Exercise3Optional.ts

@@ -1,4 +1,8 @@
 import { Option as Optional } from '@ephox/katamari';
+
+// TODO: remove when we upgrade this tutorial to TinyMCE 5
+import { Element, console, ChildNode } from '@ephox/dom-globals';
+
 /*
 Optional
 

src/main/ts/Exercise4FP.ts

@@ -1,5 +1,8 @@
 import { Fun, Option as Optional } from "@ephox/katamari";
 
+// TODO: remove when we upgrade this tutorial to TinyMCE 5
+import { console } from '@ephox/dom-globals';
+
 /*
 Functional programming is about programming in functions. Functions in the mathematical sense. "Pure" functions.
 

src/main/ts/Exercise5Sugar.ts

@@ -0,0 +1,26 @@
+import { Element as SugarElement } from '@ephox/sugar';
+
+// TODO: remove when we upgrade this tutorial to TinyMCE 5
+import { Element, document } from '@ephox/dom-globals';
+
+/*
+Sugar
+
+Sugar is our library for DOM manipulation. It's kinda our version of jquery, but with less $.
+Sugar smooths over browser differences and gives us useful functions for manipulating the DOM.
+
+When using Sugar, we don't use native DOM elements, we wrap them in the SugarElement data type.
+This encourages us to only use Sugar functions to manipulate these elements, rather than the native DOM directly.
+
+NOTE: Like Option=>Optional, Sugar is in the process of renaming. This tutorial is using the old libraries, but we'll
+rename imports to use the new names.
+
+Wrapping
+
+The first thing we need to know is how to wrap and unwrap a sugar element.
+ */
+
+const e1: Element = document.createElement('span');
+
+const se1 = SugarElement.fromDom(e1);
+

tsconfig.json

@@ -3,7 +3,7 @@
     "moduleResolution": "node",
     "target": "es5",
     "module": "es2015",
-    "lib": ["es2015", "dom"],
+    "lib": ["es2015"],
     "importHelpers": true,
     "declaration": true,
     "declarationMap": true,

yarn.lock

@@ -75,6 +75,11 @@
   resolved "https://registry.yarnpkg.com/@ephox/dom-globals/-/dom-globals-1.1.2.tgz#cb181a7652c1f097c9920fcf551c1fe202f70041"
   integrity sha512-wTcfYP5FH4n5tzVMaE8a7T6XqdTFiGfGAC6LiuCYPBh4mOeIEN5WkiPuAy+trJBl0wRdlwKl+XmhIW06Xf4tpg==
 
+"@ephox/dom-globals@^3.9.5":
+  version "3.9.5"
+  resolved "https://registry.yarnpkg.com/@ephox/dom-globals/-/dom-globals-3.9.5.tgz#ae198970b6a5a008a3aa47eb09f9856a2048098c"
+  integrity sha512-CeRpPjoaZADP/2QUbz+PmxNfbLbb/Cq/d96kW4Auzl9s08R64Re4hkNv01267kp1IyWHgF98agFYhNa1WvwXtg==
+
 "@ephox/katamari@^6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@ephox/katamari/-/katamari-6.1.2.tgz#677693a182c58cdd7c1f318fdf8b728a93bb3e7d"