Skip to content

Commit

Permalink
Merge pull request #61 from fleetbase/dev-v0.2.20
Browse files Browse the repository at this point in the history 
added a wysiwyg component powered by tiptap framework `<TipTapEditor />`
  • Loading branch information
@roncodes
roncodes authored Jul 30, 2024
2 parents 23a6e05 + 2d32d72 commit 255c35e
Show file tree
Hide file tree
Showing 17 changed files with 11,517 additions and 7,426 deletions.
19 changes: 9 additions & 10 deletions addon/components/logo-icon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';
import { isBlank } from '@ember/utils';
import { task } from 'ember-concurrency';

export default class LogoIconComponent extends Component {
@service store;
Expand All @@ -29,7 +30,7 @@ export default class LogoIconComponent extends Component {
this.size = this.getSize();

if (isBlank(this.args.brand)) {
this.loadIcon();
this.loadIcon.perform();
} else {
this.brand = this.args.brand;
this.ready = true;
Expand All @@ -46,14 +47,12 @@ export default class LogoIconComponent extends Component {
return this.size;
}

loadIcon() {
this.store
.findRecord('brand', 1)
.then((brand) => {
this.brand = brand;
})
.finally(() => {
this.ready = true;
});
@task *loadIcon() {
try {
this.brand = yield this.store.findRecord('brand', 1);
this.ready = true;
} catch {
this.ready = true;
}
}
}
8 changes: 8 additions & 0 deletions addon/components/modals/tip-tap-editor-insert-table.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
<div class="modal-body-container">
<div class="mt-2 grid grid-cols-2 gap-2">
<InputGroup @name="Rows" @value={{@options.rows}} @helpText="The number of rows for the table" @inputClass="input-lg" />
<InputGroup @name="Columns" @value={{@options.columns}} @helpText="The number of columns for the table" @inputClass="input-lg" />
</div>
</div>
</Modal::Default>
9 changes: 9 additions & 0 deletions addon/components/modals/tip-tap-editor-insert-youtube.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
<div class="modal-body-container">
<InputGroup @name="Youtube Video URL" @value={{@options.url}} @helpText="The URL to the Youtube video you want to insert" @inputClass="input-lg" />
<div class="mt-2 grid grid-cols-2 gap-2">
<InputGroup @name="Height" @value={{@options.height}} @helpText="The Height of the Youtube video" @inputClass="input-lg" />
<InputGroup @name="Width" @value={{@options.width}} @helpText="The Width of the Youtube video" @inputClass="input-lg" />
</div>
</div>
</Modal::Default>
116 changes: 116 additions & 0 deletions addon/components/tip-tap-editor.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<div class="tip-tap-editor" {{did-insert this.createTipTapEditor}} ...attributes>
<div class="tip-tap-editor-controls">
<div class="tip-tap-editor-control-group grouped-buttons">
<Button class="tip-tap-control-button" @onClick={{this.undo}} @icon="arrow-rotate-left" @helpText="Undo" />
<Button class="tip-tap-control-button" @onClick={{this.redo}} @icon="arrow-rotate-right" @helpText="Redo" />
</div>
<div class="tip-tap-editor-control-group">
<DropdownButton @text="Format" @icon="caret-down" @buttonClass="tip-tap-control-button" @renderInPlace={{true}} as |dd|>
<div class="next-dd-menu" aria-labelledby="editor-format-menu">
{{#each this.formatControls as |formatControl|}}
<a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd formatControl.fn)}}>
<div class="flex-1 flex flex-row items-center">
<div class="w-6">
<FaIcon @icon={{formatControl.icon}} />
</div>
<span>{{formatControl.title}}</span>
</div>
</a>
{{/each}}
</div>
</DropdownButton>
</div>
<div class="tip-tap-editor-control-group">
<DropdownButton @text="Heading" @icon="caret-down" @buttonClass="tip-tap-control-button" @renderInPlace={{true}} as |dd|>
<div class="next-dd-menu" aria-labelledby="editor-format-menu">
{{#each this.headingControls as |headingControl|}}
<a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd headingControl.fn headingControl.params)}}>
<div class="flex-1 flex flex-row items-center">
<div class="w-6">
<FaIcon @icon={{headingControl.icon}} />
</div>
<span>{{headingControl.title}}</span>
</div>
</a>
{{/each}}
</div>
</DropdownButton>
<DropdownButton @text="Font" @icon="caret-down" @buttonClass="tip-tap-control-button" @renderInPlace={{true}} as |dd|>
<div class="next-dd-menu" aria-labelledby="editor-format-menu">
{{#each this.fontFamilyControls as |fontFamilyControl|}}
<a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd fontFamilyControl.fn fontFamilyControl.params)}}>
<div class="flex-1 flex flex-row items-center">
<div class="w-6">
<FaIcon @icon={{fontFamilyControl.icon}} />
</div>
<span>{{fontFamilyControl.title}}</span>
</div>
</a>
{{/each}}
</div>
</DropdownButton>
<div class="tip-tap-colorpicker">
<Input @type="color" @value={{this.color}} {{on "change" this.fontColor}} class="tip-tap-colorpicker-input" />
<Button class="tip-tap-control-button" @helpText="Clear Color" @onClick={{this.clearFontColor}} @icon="eraser" />
</div>
</div>
<div class="tip-tap-editor-control-group grouped-buttons">
<Button class="tip-tap-control-button" @onClick={{this.alignLeft}} @icon="align-left" @helpText="Align Left" />
<Button class="tip-tap-control-button" @onClick={{this.alginCenter}} @icon="align-center" @helpText="Align Center" />
<Button class="tip-tap-control-button" @onClick={{this.alignRight}} @icon="align-right" @helpText="Align Right" />
</div>
<div class="tip-tap-editor-control-group">
<Button class="tip-tap-control-button" @onClick={{this.paragraph}} @icon="paragraph" @helpText="Paragraph" />
<Button class="tip-tap-control-button" @onClick={{this.blockquote}} @icon="quote-left" @helpText="Blockquote" />
<Button class="tip-tap-control-button" @onClick={{this.codeblock}} @icon="code" @helpText="Codeblock" />
<Button class="tip-tap-control-button" @onClick={{this.horizontalRule}} @icon="minus" @helpText="Insert Horizontal Rule" />
</div>
<div class="tip-tap-editor-control-group">
<Button class="tip-tap-control-button" @onClick={{this.bold}} @icon="bold" @helpText="Bold" />
<Button class="tip-tap-control-button" @onClick={{this.italic}} @icon="italic" @helpText="Italic" />
<Button class="tip-tap-control-button" @onClick={{this.strikethrough}} @icon="strikethrough" @helpText="Strikethrough" />
</div>
<div class="tip-tap-editor-control-group">
<Button class="tip-tap-control-button" @onClick={{this.list}} @icon="list" @helpText="List" />
<Button class="tip-tap-control-button" @onClick={{this.orderedList}} @icon="list-ol" @helpText="Ordered List" />
</div>
<div class="tip-tap-editor-control-group">
<Button class="tip-tap-control-button" @onClick={{this.insertTable}} @icon="table" @helpText="Insert Table" />
<DropdownButton @text="Table" @icon="caret-down" @buttonClass="tip-tap-control-button" @renderInPlace={{true}} @helpText="Modify Current Table" as |dd|>
<div class="next-dd-menu" aria-labelledby="editor-format-menu">
{{#each this.tableControls as |tableControl|}}
{{#if tableControl.seperator}}
<div class="next-dd-menu-seperator"></div>
{{else}}
<a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd tableControl.fn)}}>
<div class="flex-1 flex flex-row items-center">
<div class="w-6">
<FaIcon @icon={{tableControl.icon}} />
</div>
<span>{{tableControl.title}}</span>
</div>
</a>
{{/if}}
{{/each}}
</div>
</DropdownButton>
</div>
<div class="tip-tap-editor-control-group">
<FileUpload @name="image" @for="image" @accept="jpg,png,gif,webp" @multiple={{false}} @onFileAdded={{this.insertImage}} @labelClass="btn-wrapper rounded-md shadow-sm">
<a type="button" class="btn btn-default tip-tap-control-button cursor-pointer">
<FaIcon @icon="image" />
{{#if this.file}}
<div class="ml-1 flex items-center text-sm">
<Spinner class="dark:text-blue-400 text-blue-900" @width="10" @height="10" />
<span class="ml-1 text-xs dark:text-blue-400 text-blue-900">{{round this.file.progress}}%</span>
</div>
{{/if}}
</a>
<Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
<InputInfo @text="Insert Image" />
</Attach::Tooltip>
</FileUpload>
<Button class="tip-tap-control-button" @onClick={{this.insertYoutube}} @icon="youtube" @iconPrefix="fab" @helpText="Insert Youtube Video" />
</div>
</div>
</div>
Loading

0 comments on commit 255c35e

Please sign in to comment.