-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1777 from smeup/9.6.0
9.6.0
- Loading branch information
Showing
88 changed files
with
5,581 additions
and
971 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
packages/ketchup-showcase/src/views/components/advanced/editor/Editor.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <template> | ||
| <div> | ||
| <comp :giturl="giturl" :headtitle="headtitle" :titles="titles"> | ||
| <template v-slot:0> | ||
| <editor-demo></editor-demo> | ||
| </template> | ||
| <template v-slot:1> | ||
| <editor-basic></editor-basic> | ||
| </template> | ||
| </comp> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Comp from '@/views/templates/Comp'; | ||
| import EditorDemo from './examples/EditorDemo'; | ||
| import EditorBasic from './examples/EditorBasic'; | ||
| export default { | ||
| components: { | ||
| EditorDemo, | ||
| EditorBasic, | ||
| Comp, | ||
| }, | ||
| data() { | ||
| return { | ||
| giturl: | ||
| 'https://github.com/smeup/ketchup/tree/develop/packages/ketchup/src/components/kup-editor', | ||
| headtitle: 'Editor', | ||
| titles: ['Playground', 'Basic Usage'], | ||
| }; | ||
| }, | ||
| title: 'Ketchup | Editor', | ||
| }; | ||
| </script> |
26 changes: 26 additions & 0 deletions
26
packages/ketchup-showcase/src/views/components/advanced/editor/examples/EditorBasic.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <template> | ||
| <div> | ||
| <div class="demo-wrapper"> | ||
| <p | ||
| >The Editor component provides a streamlined solution for creating and | ||
| editing text. It offers a user-friendly interface, making text | ||
| manipulation straightforward and efficient.</p | ||
| > | ||
| <div class="demo-container"> | ||
| <p class="centered">Sample markup</p> | ||
| <code class="flat">{{ markupBasic }}</code> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'EditorBasic', | ||
| data() { | ||
| return { | ||
| markupBasic: '<kup-editor></kup-editor>', | ||
| }; | ||
| }, | ||
| }; | ||
| </script> |
170 changes: 170 additions & 0 deletions
170
packages/ketchup-showcase/src/views/components/advanced/editor/examples/EditorDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| <template> | ||
| <div> | ||
| <demo | ||
| :demoComp="demoComp" | ||
| :demoEvents="demoEvents" | ||
| :demoMethods="demoMethods" | ||
| :demoProps="demoProps" | ||
| ></demo> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Demo from '@/views/templates/Demo'; | ||
| export default { | ||
| components: { | ||
| Demo, | ||
| }, | ||
| name: 'EditorDemo', | ||
| data() { | ||
| return { | ||
| demoComp: createComp(), | ||
| demoEvents: [ | ||
| { | ||
| name: 'kup-editor-autosave', | ||
| type: 'CustomEvent', | ||
| }, | ||
| { | ||
| name: 'kup-editor-ready', | ||
| type: 'CustomEvent', | ||
| }, | ||
| { | ||
| name: 'kup-editor-save', | ||
| type: 'CustomEvent', | ||
| }, | ||
| ], | ||
| demoMethods: [ | ||
| { | ||
| name: 'getProps', | ||
| description: | ||
| "Returns the props' values of the component. When invoked giving true as the only argument, returns the props descriptions instead.", | ||
| }, | ||
| { | ||
| name: 'getValueAsHTML', | ||
| description: `Returns the component's internal value as html.`, | ||
| }, | ||
| { | ||
| name: 'getValueAsMarkdown', | ||
| description: `Returns the component's internal value as markdown.`, | ||
| }, | ||
| { | ||
| name: 'refresh', | ||
| description: | ||
| 'This method is used to trigger a new render of the component.', | ||
| }, | ||
| { | ||
| name: 'setProps', | ||
| description: 'Sets the props to the component.', | ||
| }, | ||
| ], | ||
| demoProps: [ | ||
| { | ||
| prop: 'autosaveTimer', | ||
| description: | ||
| 'When specified, the component will emit the kup-editor-save event at regular intervals.', | ||
| type: 'number', | ||
| default: 'undefined', | ||
| try: 'field', | ||
| }, | ||
| { | ||
| prop: 'editorHeight', | ||
| description: 'Sets the height of the component.', | ||
| type: 'string', | ||
| default: '"auto"', | ||
| try: 'field', | ||
| }, | ||
| { | ||
| prop: 'initialEditType', | ||
| description: | ||
| 'The editor type. Supported values: "markdown", "wysiwyg".', | ||
| type: 'KupEditorType', | ||
| default: 'markdown', | ||
| try: 'field', | ||
| }, | ||
| { | ||
| prop: 'initialValue', | ||
| description: 'The initial editor value.', | ||
| type: 'string', | ||
| default: '""', | ||
| try: 'field', | ||
| }, | ||
| { | ||
| prop: 'isReadOnly', | ||
| description: 'Defines whether the editor is disabled or not.', | ||
| type: 'boolean', | ||
| default: 'false', | ||
| try: 'switch', | ||
| }, | ||
| { | ||
| prop: 'previewStyle', | ||
| description: | ||
| 'The editor preview style. Supported values: "tab", "vertical".', | ||
| type: 'KupEditorPreview', | ||
| default: 'vertical', | ||
| try: 'field', | ||
| }, | ||
| { | ||
| prop: 'showSaveButton', | ||
| description: `Defines whether to show the save button in editor's toolbar or not.`, | ||
| type: 'boolean', | ||
| default: 'true', | ||
| try: 'switch', | ||
| }, | ||
| { | ||
| prop: 'showToolbar', | ||
| description: `Defines whether to show the editor's toolbar or not.`, | ||
| type: 'string', | ||
| default: 'boolean', | ||
| try: 'switch', | ||
| }, | ||
| ], | ||
| }; | ||
| }, | ||
| }; | ||
| function createComp() { | ||
| const comp = document.createElement('kup-editor'); | ||
| comp.id = 'demo-component'; | ||
| comp.initialEditType = 'markdown'; | ||
| comp.initialValue = `<p><img src="https://uicdn.toast.com/toastui/img/tui-editor-bi.png" alt="image"></p> | ||
| <h1>Awesome Editor!</h1> | ||
| <p>It has been <em>released as opensource in 2018</em> and has <del>continually</del> evolved to <strong>receive 10k GitHub ⭐️ Stars</strong>.</p> | ||
| <h2>Create Instance</h2> | ||
| <p>You can create an instance with the following code and use <code data-backticks="1">getHtml()</code> and <code data-backticks="1">getMarkdown()</code> of the <a href="https://github.com/nhn/tui.editor">Editor</a>.</p> | ||
| <pre class="lang-js"><code data-language="js">co | ||
| > See the table below for default options | ||
| > > More API information can be found in the document | ||
| | name | type | description | | ||
| | --- | --- | --- | | ||
| | el | HTMLElement | container element | | ||
| ## Featuress | ||
| * CommonMark + GFM Specifications | ||
| * Live Preview | ||
| * Scroll Sync | ||
| * Auto Indent | ||
| * Syntax Highlight | ||
| 1. Markdown | ||
| 2. Preview | ||
| ## Support Wrappers | ||
| > * Wrappers | ||
| > 1. [x] React | ||
| > 2. [x] Vue | ||
| > 3. [ ] Ember<p>My Custom value for editor</p> | ||
| </code></pre> | ||
| `; | ||
| comp.isReadOnly = false; | ||
| comp.previewStyle = 'vertical'; | ||
| comp.showSaveButton = true; | ||
| comp.showToolbar = true; | ||
| return comp; | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| let comp = document.getElementById('editor-html'); | ||
|
|
||
| comp.addEventListener('kup-editor-autosave', (e) => { | ||
| console.log('kup-editor-autosave (html) ' + new Date().toISOString(), e); | ||
| }); | ||
|
|
||
| let props = { | ||
| customStyle: '', | ||
| editorHeight: '400px', | ||
| initialEditType: 'wysiwyg', | ||
| initialValue: | ||
| '<div data-tomark-pass="">prova prova 123456 56<br></div><div data-tomark-pass=""><br></div><div data-tomark-pass="">e vado a capo<br></div><div data-tomark-pass=""><br></div><div data-tomark-pass="">ancora<br></div><div data-tomark-pass=""><br></div><div data-tomark-pass="">e ancora</div>', | ||
| isReadOnly: false, | ||
| previewStyle: 'tab', | ||
| showSaveButton: true, | ||
| showToolbar: true, | ||
| autosaveTimer: 5000, | ||
| }; | ||
|
|
||
| if (props) { | ||
| for (const key in props) { | ||
| comp[key] = props[key]; | ||
| } | ||
| } | ||
|
|
||
| comp = document.getElementById('editor-markdown'); | ||
|
|
||
| comp.addEventListener('kup-editor-autosave', (e) => { | ||
| console.log( | ||
| 'kup-editor-autosave (markdown) ' + new Date().toISOString(), | ||
| e | ||
| ); | ||
| }); | ||
|
|
||
| props = { | ||
| customStyle: '', | ||
| initialEditType: 'markdown', | ||
| initialValue: '# title 1 \n ## title2', | ||
| isReadOnly: false, | ||
| previewStyle: 'tab', | ||
| showSaveButton: false, | ||
| showToolbar: true, | ||
| autosaveTimer: 5000, | ||
| }; | ||
|
|
||
| comp.style = '--kup-editor-height: 300px;'; | ||
|
|
||
| if (props) { | ||
| for (const key in props) { | ||
| comp[key] = props[key]; | ||
| } | ||
| } |
Oops, something went wrong.