-
-
-
- @{{context.element.character}}
-
-
-
- {{ item }}
-
+
+
+
+
+
+ @{{ context.element.character }}
+
+
+
\ No newline at end of file
+
+
diff --git a/demo/app/mentions/mentions.component.scss b/demo/app/mentions/mentions.component.scss
index d7540e15..769b45fd 100644
--- a/demo/app/mentions/mentions.component.scss
+++ b/demo/app/mentions/mentions.component.scss
@@ -8,7 +8,7 @@
margin: 0 1px;
line-height: 22px;
&.focus {
- box-shadow: 0 0 0 2px #B4D5FF;
+ box-shadow: 0 0 0 2px #b4d5ff;
}
cursor: pointer;
}
@@ -29,11 +29,11 @@
padding-left: 15px;
cursor: pointer;
&.active {
- background-color: #B4D5FF;
+ background-color: #b4d5ff;
border-radius: 3px;
}
}
padding: 3px;
border-radius: 4px;
- box-shadow: 0 1px 5px rgba(0,0,0,.2);
-}
\ No newline at end of file
+ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+}
diff --git a/demo/app/mentions/mentions.component.ts b/demo/app/mentions/mentions.component.ts
index 1e190499..e938354a 100644
--- a/demo/app/mentions/mentions.component.ts
+++ b/demo/app/mentions/mentions.component.ts
@@ -3,10 +3,16 @@ import { Editor, Transforms, createEditor, Element, Range } from 'slate';
import { withHistory } from 'slate-history';
import { AngularEditor, withAngular } from 'slate-angular';
import { MentionElement } from 'custom-types';
+import { NgClass, NgFor } from '@angular/common';
+import { SlateElement } from '../../../packages/src/components/element/element.component';
+import { FormsModule } from '@angular/forms';
+import { SlateEditable } from '../../../packages/src/components/editable/editable.component';
@Component({
selector: 'demo-mentions',
- templateUrl: 'mentions.component.html'
+ templateUrl: 'mentions.component.html',
+ standalone: true,
+ imports: [SlateEditable, FormsModule, SlateElement, NgClass, NgFor]
})
export class DemoMentionsComponent implements OnInit {
searchText = '';
@@ -25,10 +31,12 @@ export class DemoMentionsComponent implements OnInit {
@ViewChild('suggestionList', { static: true })
suggestionList: ElementRef;
- constructor(private renderer2: Renderer2, private cdr: ChangeDetectorRef) { }
+ constructor(
+ private renderer2: Renderer2,
+ private cdr: ChangeDetectorRef
+ ) {}
- ngOnInit() {
- }
+ ngOnInit() {}
renderElement = (element: Element) => {
if (element.type === 'mention') {
@@ -74,11 +82,13 @@ export class DemoMentionsComponent implements OnInit {
}
};
-
valueChange(value: Element[]) {
const { selection, operations } = this.editor;
if (operations[0].type === 'insert_text' && operations[0].text === this.trigger) {
- this.target = { anchor: Editor.before(this.editor, selection.anchor), focus: selection.focus };
+ this.target = {
+ anchor: Editor.before(this.editor, selection.anchor),
+ focus: selection.focus
+ };
this.searchText = '';
this.activeIndex = 0;
this.updateSuggestionsLocation();
@@ -104,24 +114,14 @@ export class DemoMentionsComponent implements OnInit {
}
updateSuggestionsLocation() {
- this.suggestions = CHARACTERS
- .filter(suggestion => {
- return suggestion.toLowerCase().includes(this.searchText.toLowerCase());
- })
- .slice(0, 10);
+ this.suggestions = CHARACTERS.filter(suggestion => {
+ return suggestion.toLowerCase().includes(this.searchText.toLowerCase());
+ }).slice(0, 10);
if (this.target && this.suggestions.length) {
const nativeRange = AngularEditor.toDOMRange(this.editor, this.target);
const rect = nativeRange.getBoundingClientRect();
- this.renderer2.setStyle(
- this.suggestionList.nativeElement,
- 'left',
- `${rect.left + window.pageXOffset}px`
- );
- this.renderer2.setStyle(
- this.suggestionList.nativeElement,
- 'top',
- `${rect.top + window.pageYOffset + 25}px`
- );
+ this.renderer2.setStyle(this.suggestionList.nativeElement, 'left', `${rect.left + window.pageXOffset}px`);
+ this.renderer2.setStyle(this.suggestionList.nativeElement, 'top', `${rect.top + window.pageYOffset + 25}px`);
return;
}
this.renderer2.removeStyle(this.suggestionList.nativeElement, 'left');
@@ -147,19 +147,23 @@ export class DemoMentionsComponent implements OnInit {
}
}
-const withMentions = (editor) => {
+const withMentions = editor => {
const { isVoid, isInline } = editor;
- editor.isInline = (element) => {
+ editor.isInline = element => {
return element.type === 'mention' ? true : isInline(element);
};
- editor.isVoid = (element) => {
+ editor.isVoid = element => {
return element.type === 'mention' ? true : isVoid(element);
};
return editor;
};
const insertMention = (editor: Editor, character: string) => {
- const mention: MentionElement = { type: 'mention', character, children: [{ text: '' }] };
+ const mention: MentionElement = {
+ type: 'mention',
+ character,
+ children: [{ text: '' }]
+ };
Transforms.insertNodes(editor, mention);
Transforms.move(editor);
};
@@ -604,5 +608,5 @@ const CHARACTERS = [
'Zam Wesell',
'Zev Senesca',
'Ziro the Hutt',
- 'Zuckuss',
-]
+ 'Zuckuss'
+];
diff --git a/demo/app/placeholder/placeholder.component.ts b/demo/app/placeholder/placeholder.component.ts
index 76301412..9cd60d1e 100644
--- a/demo/app/placeholder/placeholder.component.ts
+++ b/demo/app/placeholder/placeholder.component.ts
@@ -1,20 +1,34 @@
-import { Component } from "@angular/core";
-import { createEditor, Descendant, Editor, Node } from "slate";
-import { SlatePlaceholder, withAngular } from "slate-angular";
+import { Component } from '@angular/core';
+import { createEditor, Descendant, Editor, Node } from 'slate';
+import { SlatePlaceholder, withAngular } from 'slate-angular';
+import { FormsModule } from '@angular/forms';
+import { SlateEditable } from '../../../packages/src/components/editable/editable.component';
@Component({
selector: 'demo-placeholder',
template: `
-
-
-
-
-
-
- `
+
+
+
+
+
+
+ `,
+ standalone: true,
+ imports: [SlateEditable, FormsModule]
})
export class DemoPlaceholderComponent {
- constructor() { }
+ constructor() {}
value = initialValue;
@@ -23,25 +37,25 @@ export class DemoPlaceholderComponent {
type: 'paragraph',
children: [
{
- text: 'Press Enter to make new paragraph and will show placeholder',
- },
- ],
+ text: 'Press Enter to make new paragraph and will show placeholder'
+ }
+ ]
}
];
- placeholderDecorate: (editor: Editor) => SlatePlaceholder[] = (editor) => {
- const cursorAnchor = editor.selection?.anchor
- if(cursorAnchor) {
- const parent = Node.parent(editor,cursorAnchor.path)
- if(parent.children.length === 1 &&
- Array.from(Node.texts(parent)).length === 1 &&
- Node.string(parent) === '' ) {
- const start = Editor.start(editor, cursorAnchor)
- return [{
- placeholder: 'advance placeholder use with placeholderDecoration',
- anchor: start,
- focus: start
- }];
+ placeholderDecorate: (editor: Editor) => SlatePlaceholder[] = editor => {
+ const cursorAnchor = editor.selection?.anchor;
+ if (cursorAnchor) {
+ const parent = Node.parent(editor, cursorAnchor.path);
+ if (parent.children.length === 1 && Array.from(Node.texts(parent)).length === 1 && Node.string(parent) === '') {
+ const start = Editor.start(editor, cursorAnchor);
+ return [
+ {
+ placeholder: 'advance placeholder use with placeholderDecoration',
+ anchor: start,
+ focus: start
+ }
+ ];
} else {
return [];
}
@@ -59,8 +73,8 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
- text: '',
- },
- ],
- },
-]
+ text: ''
+ }
+ ]
+ }
+];
diff --git a/demo/app/plugins/block-cards.plugin.ts b/demo/app/plugins/block-cards.plugin.ts
index f6124443..330917e4 100644
--- a/demo/app/plugins/block-cards.plugin.ts
+++ b/demo/app/plugins/block-cards.plugin.ts
@@ -1,4 +1,3 @@
-
import { Editor, Path, Transforms, Location } from 'slate';
import { AngularEditor, hasBlockCard, isCardLeft } from 'slate-angular';
import { HistoryEditor } from 'slate-history';
@@ -38,7 +37,9 @@ export const withBlockCard = editor => {
} else {
insertParagraph(editor, cursorRootPath);
Transforms.select(editor, cursorRootPath);
- Transforms.removeNodes(editor, { at: Path.next(cursorRootPath) });
+ Transforms.removeNodes(editor, {
+ at: Path.next(cursorRootPath)
+ });
return;
}
}
@@ -55,9 +56,10 @@ export const withBlockCard = editor => {
if (isLeftCursor) {
insertParagraph(editor, cursorRootPath);
Transforms.select(editor, cursorRootPath);
- Transforms.removeNodes(editor, { at: Path.next(cursorRootPath) });
+ Transforms.removeNodes(editor, {
+ at: Path.next(cursorRootPath)
+ });
return;
-
} else {
const nextPath = Path.next(cursorRootPath);
HistoryEditor.withoutMerging(editor, () => {
@@ -87,18 +89,22 @@ export const withBlockCard = editor => {
}
}
insertText(text);
- }
+ };
return editor;
};
const insertParagraph = (editor: Editor, at: Location) => {
- Transforms.insertNodes(editor, {
- type: 'paragraph',
- children: [
- {
- text: ''
- }
- ]
- }, { at });
+ Transforms.insertNodes(
+ editor,
+ {
+ type: 'paragraph',
+ children: [
+ {
+ text: ''
+ }
+ ]
+ },
+ { at }
+ );
};
diff --git a/demo/app/readonly/readonly.component.ts b/demo/app/readonly/readonly.component.ts
index 00187f0c..8682944d 100644
--- a/demo/app/readonly/readonly.component.ts
+++ b/demo/app/readonly/readonly.component.ts
@@ -1,17 +1,21 @@
-import { Component } from "@angular/core";
-import { createEditor, Descendant } from "slate";
-import { withAngular } from "slate-angular";
+import { Component } from '@angular/core';
+import { createEditor, Descendant } from 'slate';
+import { withAngular } from 'slate-angular';
+import { FormsModule } from '@angular/forms';
+import { SlateEditable } from '../../../packages/src/components/editable/editable.component';
@Component({
selector: 'demo-readonly',
template: `
-
-
-
- `
+
+
+
+ `,
+ standalone: true,
+ imports: [SlateEditable, FormsModule]
})
export class DemoReadonlyComponent {
- constructor() { }
+ constructor() {}
value = initialValue;
@@ -23,9 +27,8 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
- text:
- 'This example shows what happens when the Editor is set to readOnly, it is not editable',
- },
- ],
- },
-]
+ text: 'This example shows what happens when the Editor is set to readOnly, it is not editable'
+ }
+ ]
+ }
+];
diff --git a/demo/app/richtext/richtext.component.html b/demo/app/richtext/richtext.component.html
index 597a9143..8ac0cad8 100644
--- a/demo/app/richtext/richtext.component.html
+++ b/demo/app/richtext/richtext.component.html
@@ -1,31 +1,42 @@
-
- {{ toolbarItem.icon
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+ {{ toolbarItem.icon }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 
-
-