@ember-eui/core 1.2.6 → 1.4.0

package/docs/editors/code/code-block-demo/demo1.md

@@ -0,0 +1,62 @@
+---
+order: 1
+---
+
+# Demo
+
+```hbs template
+<div>
+  <EuiCodeBlock
+    @language={{this.language}}
+    @isCopyable={{true}}
+    @overflowHeight='500px'
+  >
+    {{this.htmlCode}}
+  </EuiCodeBlock>
+</div>
+<EuiTextArea
+  @value={{this.htmlCode}}
+  {{on 'input' (pick 'target.value' (set this 'htmlCode'))}}
+/>
+
+<EuiSelect
+  @value={{this.language}}
+  @hasNoInitialSelection={{true}}
+  @options={{array
+    (hash value='javascript' text='javascript')
+    (hash value='html' text='html')
+    (hash value='golang' text='golang')
+  }}
+  @id={{selectId}}
+  {{on 'change' (pick 'target.value' (set this 'language'))}}
+>
+  <:prepend as |classes|>
+    <EuiFormLabel class={{classes}} for={{selectId}}>
+      Choose a language
+    </EuiFormLabel>
+  </:prepend>
+</EuiSelect>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class EuiMarkdownEditor1 extends Component {
+  @tracked language = 'html';
+  @tracked value = `### hehe
+  - [ ] hola
+  - [ ] hola
+  - [x] hola
+  \`\`\`javascript
+    class Human {}
+  \`\`\`
+  `;
+  @tracked htmlCode = `<!--I'm an example of HTML-->
+<div>
+  asdf
+</div>
+`;
+}
+```

package/docs/editors/code/code-block.md

@@ -0,0 +1 @@
+# CodeBlock

package/docs/editors/code/inline-demo/demo1.md

@@ -0,0 +1,49 @@
+---
+order: 1
+---
+
+# Demo
+
+```hbs template
+<EuiText>
+  <p>
+    Sometimes you need to emphasize
+    <EuiCode>Code</EuiCode>
+    like this.
+  </p>
+  <p>
+    You can also pass a language in like
+    <EuiCode language='html'>{{this.htmlCode}}</EuiCode>.
+  </p>
+  <p>
+    Make the background transparent like this
+    <EuiCode @language='html' @transparentBackground={{true}}>
+      {{this.htmlCode}}
+    </EuiCode>
+    .
+  </p>
+</EuiText>
+<EuiTextArea @value={{this.htmlCode}} {{on "input" (pick "target.value" (set this "htmlCode"))}}/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class EuiMarkdownEditor1 extends Component {
+  @tracked value = `### hehe
+  - [ ] hola
+  - [ ] hola
+  - [x] hola
+  \`\`\`javascript
+    class Human {}
+  \`\`\`
+  `;
+  @tracked htmlCode = `<!--I'm an example of HTML-->
+<div>
+  asdf
+</div>
+`;
+}
+```

package/docs/editors/code/inline.md

@@ -0,0 +1 @@
+# Inline

package/docs/editors/markdown-editor/base-editor-demo/demo1.md

@@ -0,0 +1,120 @@
+---
+order: 1
+---
+
+# Demo
+
+```hbs template
+<EuiMarkdownEditor
+  @value={{this.value}}
+  @onChange={{set this 'value'}}
+  @processingPluginList={{this.processingPlugins}}
+/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { visit } from '@ember-eui/core/utils/markdown/plugins/markdown-add-components';
+import { defaultProcessingPlugins } from '@ember-eui/core/utils/markdown/plugins/markdown-default-plugins';
+
+
+/*
+ Quick example how you can extend plugins, this plugin adds _blank to `a` elements
+*/
+function TargetBlankProcessingPlugin() {
+  return (tree) => {
+    visit(tree, (node) => {
+      if (node.type === 'element' && node.tagName === 'a') {
+				node.properties.target = '_blank';
+      }
+      return node;
+    });
+  };
+}
+
+const processingPlugins = [
+  ...defaultProcessingPlugins,
+  [TargetBlankProcessingPlugin, {}]
+];
+
+export default class EuiMarkdownEditor1 extends Component {
+  processingPlugins = processingPlugins;
+  @tracked value = `## 👋 Hello there!
+
+I'm a **EuiMarkdownEditor** with:
+
+- a \`height\` set to \`200\`
+- my parent container is a flex item
+
+
+### Things you should know
+
+When my content is very long 😅
+
+The preview height is automatically adjusted 😉
+
+To avoid a scrollbar 😌
+
+### That's why I look good 😍
+
+- [ ] First Checkbox
+- [ ] Second Checkbox
+- [x] Third Checkbox
+
+\`\`\`ts
+class Human {
+   get fullName() {
+     return \`${this.name} ${this.lastName}\`;
+   }
+}
+\`\`\`
+
+\`\`\`golang
+package main
+
+import \"fmt\"
+
+func main() {
+
+	// \`var\` declares 1 or more variables.
+	var a = "initial"
+	fmt.Println(a)
+
+	// You can declare multiple variables at once.
+	var b, c int = 1, 2
+	fmt.Println(b, c)
+
+	// Go will infer the type of initialized variables.
+	var d = true
+	fmt.Println(d)
+
+	// Variables declared without a corresponding
+	// initialization are _zero-valued_. For example, the
+	// zero value for an \`int\` is \`0\`.
+	var e int
+	fmt.Println(e)
+
+	// The \`:=\` syntax is shorthand for declaring and
+	// initializing a variable, e.g. for
+	// \`var f string = "apple"\` in this case.
+	f := "apple"
+	fmt.Println(f)
+}
+
+\`\`\`
+
+----
+
+### You can also add tooltips if you want more explanation!
+
+!{tooltip[You can also add tooltips](Some helpful description)}
+
+### And links, check the demo source in how to tweak plugins!
+
+[Access Google!](https://google.com)
+
+`;
+}
+```

package/docs/editors/markdown-editor/base-editor.md

@@ -0,0 +1 @@
+# Base Editor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "1.2.6",
+  "version": "1.4.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -77,9 +77,20 @@
     "ember-style-modifier": "^0.6.0",
     "ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag",
     "ember-truth-helpers": "^2.1.0",
+    "highlight.js": "^9.18.5",
     "lodash-es": "^4.17.21",
+    "mdast-util-to-hast": "^10.0.0",
+    "rehype-raw": "^5.0.0",
+    "rehype-stringify": "^8.0.0",
+    "remark-breaks": "^3.0.2",
+    "remark-emoji": "^2.1.0",
+    "remark-highlight.js": "^6.0.0",
+    "remark-parse": "^8.0.3",
+    "remark-rehype": "^8.0.0",
     "resolve": "^1.13.1",
-    "tabbable": "^5.1.5"
+    "tabbable": "^5.1.5",
+    "unified": "^9.2.0",
+    "vfile": "^4.2.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^1.3.0",
@@ -121,6 +132,8 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "loader.js": "^4.7.0",
+    "lodash-es": "^4.17.21",
+    "mdast-util-to-hast": "^10.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "qunit-dom": "^1.2.0",
@@ -141,5 +154,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "86127330c27486495fc56259e63163d5e34642a4"
+  "gitHead": "205ab9480989c78d5516232395b233443735bbb6"
 }

package/public/markdown-checkmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+	<path d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z" />
+</svg>

package/public/markdown-logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="16" fill="none" viewBox="0 0 26 16">
+	<path d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z" />
+</svg>