diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss index 177ddd224..cbfd8074c 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss +++ b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss @@ -236,7 +236,7 @@ div.deckgo-tools { &.image, &.image-align, &.image-delete, - &.pick-color { + &.pick-color &.left-align &.center-align &.right-align { > div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @@ -252,6 +252,27 @@ div.deckgo-tools { margin: 0; } + &.left-align { + > div { + -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + } + } + + &.center-align { + > div { + -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='76.5' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='76.5' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='76.5' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='76.5' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + } + } + + &.right-align { + > div { + -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='153' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='153' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + mask-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='iso-8859-1'?%3e%3c!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3crect x='153' y='132.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='52.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='372.5' width='455' height='30'/%3e%3c/g%3e%3cg%3e%3crect x='153' y='292.5' width='302' height='30'/%3e%3c/g%3e%3cg%3e%3crect y='212.5' width='455' height='30'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e "); + } + } + &.pick-color { > div { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M136.5 77.7l37 67L32 285.7 216.4 464l152.4-148.6 54.4-11.4L166.4 48l-29.9 29.7zm184 208H114.9l102.8-102.3 102.8 102.3zM423.3 304s-56.7 61.5-56.7 92.1c0 30.7 25.4 55.5 56.7 55.5 31.3 0 56.7-24.9 56.7-55.5S423.3 304 423.3 304z'/%3E%3C/svg%3E"); diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx index 46b32b4cc..e264be14e 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx +++ b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx @@ -6,7 +6,7 @@ import '@deckdeckgo/color'; import {DeckdeckgoPalette, DEFAULT_PALETTE} from '@deckdeckgo/color'; import {DeckdeckgoInlineEditorUtils} from '../../types/inline-editor/deckdeckgo-inline-editor-utils'; -import {ImageSize, ImageAlign, ToolbarActions} from '../../utils/enums'; +import {ImageSize, ImageAlign, ToolbarActions, ContentAlign} from '../../utils/enums'; import {AnchorLink, InlineAction, InputTargetEvent} from './deckdeckgo-inline-editor.interface'; @Component({ @@ -28,6 +28,9 @@ export class DeckdeckgoInlineEditor { @State() private underline: boolean = false; + @State() + private contentAlign: ContentAlign = ContentAlign.LEFT; + @State() private orderedList: boolean = false; @@ -459,6 +462,7 @@ export class DeckdeckgoInlineEditor { this.orderedList = false; this.unorderedList = false; this.color = null; + this.contentAlign = ContentAlign.LEFT; await this.findStyle(content); } else if (content.parentElement) { @@ -468,6 +472,7 @@ export class DeckdeckgoInlineEditor { this.orderedList = false; this.unorderedList = false; this.color = null; + this.contentAlign = ContentAlign.LEFT; await this.findStyle(content.parentElement); } @@ -508,7 +513,7 @@ export class DeckdeckgoInlineEditor { this.bold = await DeckdeckgoInlineEditorUtils.isBold(node as HTMLElement); this.italic = await DeckdeckgoInlineEditorUtils.isItalic(node as HTMLElement); this.underline = await DeckdeckgoInlineEditorUtils.isUnderline(node as HTMLElement); - + this.contentAlign = await DeckdeckgoInlineEditorUtils.getContentAlignment(node as HTMLElement); if (!this.orderedList) { this.orderedList = await DeckdeckgoInlineEditorUtils.isList(node as HTMLElement, 'ol'); } @@ -669,6 +674,18 @@ export class DeckdeckgoInlineEditor { }); } + private justifyContent(e: UIEvent, align: ContentAlign): Promise { + return new Promise(async (resolve) => { + e.stopPropagation(); + + await this.execCommand(align.toString()); + + //this.contentAlign = align; + await this.initStyle(this.selection); + resolve(); + }); + } + private toggleList(e: UIEvent, cmd: string): Promise { return new Promise(async (resolve) => { e.stopPropagation(); @@ -904,6 +921,33 @@ export class DeckdeckgoInlineEditor { resolve(); }); } + private openAlignmentActions(): Promise { + return new Promise(async (resolve) => { + this.toolbarActions = ToolbarActions.ALIGNMENT; + + resolve(); + }); + } + + renderAlignmentActions() { + return [ + , + , + + ]; + } private styleImage(e: UIEvent, applyFunction: Function, param: ImageSize | ImageAlign): Promise { return new Promise(async (resolve) => { @@ -1046,6 +1090,8 @@ export class DeckdeckgoInlineEditor { ); } else if (this.toolbarActions === ToolbarActions.IMAGE) { return this.renderImageActions(); + } else if (this.toolbarActions === ToolbarActions.ALIGNMENT) { + return this.renderAlignmentActions(); } else { return this.renderSelectionActions(); } @@ -1066,6 +1112,19 @@ export class DeckdeckgoInlineEditor { , this.renderSeparator(), + ,