diff --git a/.prettierrc.yml b/.prettierrc.yml index 9c369bc8..5a8b2351 100644 --- a/.prettierrc.yml +++ b/.prettierrc.yml @@ -9,3 +9,6 @@ overrides: - files: '*.astro' options: parser: 'astro' + - files: '*.{md,mdx}' + options: + printWidth: 80 diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css index 1c143aaf..c7b9cc6f 100644 --- a/docs/src/assets/landing.css +++ b/docs/src/assets/landing.css @@ -9,7 +9,8 @@ } [data-has-hero] .page { - background: linear-gradient(215deg, var(--overlay-blurple), transparent 40%), + background: + linear-gradient(215deg, var(--overlay-blurple), transparent 40%), radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh, radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem; } diff --git a/docs/src/content/docs/commands.md b/docs/src/content/docs/commands.md index 6b1bf7ec..699218e7 100644 --- a/docs/src/content/docs/commands.md +++ b/docs/src/content/docs/commands.md @@ -5,7 +5,12 @@ title: Commands Commands is a getter function, creates new transaciton whenever called. ```ts -this.editor.commands.textColor('red').insertText('Hello world!').focus().scrollIntoView().exec(); +this.editor.commands + .textColor('red') + .insertText('Hello world!') + .focus() + .scrollIntoView() + .exec(); ``` You must invoke `exec` method at the end to apply the changes to the editor. diff --git a/docs/src/content/docs/examples/collab.md b/docs/src/content/docs/examples/collab.md index bbe82a67..9eb2dbc3 100644 --- a/docs/src/content/docs/examples/collab.md +++ b/docs/src/content/docs/examples/collab.md @@ -11,13 +11,23 @@ See https://github.com/yjs for more details ```ts import * as Y from 'yjs'; import { WebsocketProvider } from 'y-websocket'; -import { ySyncPlugin, yCursorPlugin, yUndoPlugin, undo, redo } from 'y-prosemirror'; +import { + ySyncPlugin, + yCursorPlugin, + yUndoPlugin, + undo, + redo, +} from 'y-prosemirror'; import { Editor } from 'ngx-editor'; import { keymap } from 'prosemirror-keymap'; import { history } from 'prosemirror-history'; const ydoc = new Y.Doc(); -const provider = new WebsocketProvider('wss://prosemirror-collab.glitch.me/', 'prosemirror-demo', ydoc); +const provider = new WebsocketProvider( + 'wss://prosemirror-collab.glitch.me/', + 'prosemirror-demo', + ydoc, +); const type = ydoc.getXmlFragment('prosemirror'); new Editor({ @@ -71,5 +81,7 @@ wss.on('connection', (conn, req) => server.listen(port); -console.log(`Listening to http://localhost:${port} ${production ? '(production)' : ''}`); +console.log( + `Listening to http://localhost:${port} ${production ? '(production)' : ''}`, +); ``` diff --git a/docs/src/content/docs/examples/full-featured-editor.mdx b/docs/src/content/docs/examples/full-featured-editor.mdx index cf3d6d95..e89ae3a3 100644 --- a/docs/src/content/docs/examples/full-featured-editor.mdx +++ b/docs/src/content/docs/examples/full-featured-editor.mdx @@ -8,9 +8,7 @@ import Stackblitz from '@Components/Stackblitz.astro'; Use the following config to created a full featured editor -### app.module.ts - -```ts +```ts title="app.module.ts" import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; @@ -60,9 +58,7 @@ import { schema } from 'ngx-editor/schema'; export class AppModule {} ``` -### app.component.ts - -```ts +```ts title="app.component.ts" import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; import { Validators, Editor, Toolbar } from 'ngx-editor'; @@ -100,9 +96,7 @@ export class AppComponent implements OnInit, OnDestroy { } ``` -### app.component.html - -```html +```html title="app.component.html"
diff --git a/docs/src/content/docs/examples/mentions.mdx b/docs/src/content/docs/examples/mentions.mdx index 1d63efe7..713ac792 100644 --- a/docs/src/content/docs/examples/mentions.mdx +++ b/docs/src/content/docs/examples/mentions.mdx @@ -43,7 +43,9 @@ import { getMentionsPlugin } from 'prosemirror-mentions'; */ var getMentionSuggestionsHTML = (items) => '
' + - items.map((i) => '
' + i.name + '
').join('') + + items + .map((i) => '
' + i.name + '
') + .join('') + '
'; /** @@ -52,7 +54,9 @@ var getMentionSuggestionsHTML = (items) => */ var getTagSuggestionsHTML = (items) => '
' + - items.map((i) => '
' + i.tag + '
').join('') + + items + .map((i) => '
' + i.tag + '
') + .join('') + '
'; const users = [ @@ -73,7 +77,11 @@ var mentionPlugin = getMentionsPlugin({ setTimeout(() => { if (type === 'mention') { // autocomplete : filter list from text and return 5 users - done(users.filter((x) => x.name.toLowerCase().includes(text.toLowerCase())).splice(0, 5)); + done( + users + .filter((x) => x.name.toLowerCase().includes(text.toLowerCase())) + .splice(0, 5), + ); } else { // pass dummy tag suggestions done([ diff --git a/docs/src/content/docs/examples/reactive-forms.md b/docs/src/content/docs/examples/reactive-forms.md index 44366885..529b7c1b 100644 --- a/docs/src/content/docs/examples/reactive-forms.md +++ b/docs/src/content/docs/examples/reactive-forms.md @@ -15,15 +15,21 @@ import { NgxEditorModule } from 'ngx-editor'; @NgModule({ declarations: [AppComponent], - imports: [CommonModule, BrowserModule, FormsModule, ReactiveFormsModule, NgxEditorModule], + imports: [ + CommonModule, + BrowserModule, + FormsModule, + ReactiveFormsModule, + NgxEditorModule, + ], bootstrap: [AppComponent], }) export class AppModule {} ``` -### AppComponent +### Component -```ts +```ts title="app.component.ts" import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; import { Validators } from 'ngx-editor'; @@ -50,7 +56,7 @@ export class AppComponent implements OnInit, OnDestroy { ### Template -```html +```html title="app.component.html" diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 0775da57..d1820948 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -22,12 +22,13 @@ import { Card, CardGrid } from '@astrojs/starlight/components'; - The editor is built on top of [prosemirror](https://prosemirror.net/), which enables more flexiblity using custom - components, plugins, etc. + The editor is built on top of [prosemirror](https://prosemirror.net/), which + enables more flexiblity using custom components, plugins, etc. - The editor is meant to be drop in and easy-to-use editor and can be easily extended using prosemirror plugins to - build any additional or missing features + The editor is meant to be drop in and easy-to-use editor and can be easily + extended using prosemirror plugins to build any additional or missing + features Run `npm install ngx-editor` to get started diff --git a/docs/src/content/docs/introduction.md b/docs/src/content/docs/introduction.mdx similarity index 83% rename from docs/src/content/docs/introduction.md rename to docs/src/content/docs/introduction.mdx index f91c58ab..182ed07a 100644 --- a/docs/src/content/docs/introduction.md +++ b/docs/src/content/docs/introduction.mdx @@ -3,6 +3,8 @@ title: Introduction description: Docs intro --- +import { Tabs, TabItem } from '@astrojs/starlight/components'; + ### Getting Started [demo] | [edit on stackblitz][stackblitz] | [documentation] | [migrating from other editors][migration] @@ -11,14 +13,30 @@ description: Docs intro Install via Package managers such as [npm] or [pnpm] or [yarn] + + + ```bash npm install ngx-editor -# or +``` + + + + +```bash pnpm install ngx-editor -# or +``` + + + + +```bash yarn add ngx-editor ``` + + + ### Usage **Note**: By default the editor comes with minimal features. Refer the [demo](#demo) and [documentation] for more details and examples. @@ -59,7 +77,12 @@ Then in HTML ```html
- +
``` @@ -86,7 +109,12 @@ const jsonDoc = toDoc(html); ### Commands ```ts -this.editor.commands.textColor('red').insertText('Hello world!').focus().scrollIntoView().exec(); +this.editor.commands + .textColor('red') + .insertText('Hello world!') + .focus() + .scrollIntoView() + .exec(); ``` Run `exec` to apply the changes to the editor. diff --git a/docs/src/content/docs/menu.md b/docs/src/content/docs/menu.md index d217670e..2d757f49 100644 --- a/docs/src/content/docs/menu.md +++ b/docs/src/content/docs/menu.md @@ -13,9 +13,7 @@ Menu is not part of the editor component. Include `ngx-editor-menu` in your HTML - **customMenuRef** - (`Optional`) - Template reference to custom menu item - **dropdownPlacement** - (`Optional`) - Placement for the dropdown. Can be `top` or `bottom` -**app.component.ts** - -```ts +```ts title="app.component.ts" export class AppComponent implements OnInit, OnDestroy { editor: Editor; toolbar: Toolbar = [ @@ -44,8 +42,13 @@ export class AppComponent implements OnInit, OnDestroy { **component.html** -```html - +```html title="app.component.html" + + ``` ## Custom Menu @@ -57,7 +60,12 @@ Note: The input is just a `TemplateRef`, the menu component will render whatever #### Editor ```html - + + @@ -80,7 +88,7 @@ Note: The input is just a `TemplateRef`, the menu component will render whatever #### Custom Menu Component -```ts +```ts title="custom-menu.component.ts" import { Component, Input, OnInit } from '@angular/core'; import { setBlockType } from 'prosemirror-commands'; import { EditorState, Plugin, PluginKey, Transaction } from 'prosemirror-state'; diff --git a/docs/src/content/docs/migrations/migration-5-6.md b/docs/src/content/docs/migrations/migration-5-6.md index b00d75fa..ab0d1edd 100644 --- a/docs/src/content/docs/migrations/migration-5-6.md +++ b/docs/src/content/docs/migrations/migration-5-6.md @@ -44,7 +44,12 @@ export class AppComponent implements OnInit, OnDestroy { HTML ```html - + + ``` ## CustomMenu diff --git a/docs/src/content/docs/migrations/migration-7-8.md b/docs/src/content/docs/migrations/migration-7-8.md index 697478f5..342541b6 100644 --- a/docs/src/content/docs/migrations/migration-7-8.md +++ b/docs/src/content/docs/migrations/migration-7-8.md @@ -76,7 +76,11 @@ editor.blur.subscribe(() => {}); // no longer exposed Alternatively you can use the props on the editor component for the same ```html - + ``` #### Remvoed Editor.enable and Editor.disable methods diff --git a/docs/src/content/docs/migrations/migration.md b/docs/src/content/docs/migrations/migration.md index fd70b6b5..0ae7a329 100644 --- a/docs/src/content/docs/migrations/migration.md +++ b/docs/src/content/docs/migrations/migration.md @@ -11,7 +11,9 @@ An Example to convert and parse `div` into `p` tag persisting all attributes **Example HTML** ```html -
Example text with example custom container with inline style
+
+ Example text with example custom container with inline style +
``` Lets take this HTML and and write a schema to retain background property. diff --git a/docs/src/content/docs/quickstart.mdx b/docs/src/content/docs/quickstart.mdx index 3d9bc561..f5942927 100644 --- a/docs/src/content/docs/quickstart.mdx +++ b/docs/src/content/docs/quickstart.mdx @@ -2,23 +2,42 @@ title: Quick Start --- +import { Tabs, TabItem } from '@astrojs/starlight/components'; import Stackblitz from '@Components/Stackblitz.astro'; ### Installation -Install via Package managers such as [npm][npm] or [yarn][yarn] +Install via Package managers such as [npm] or [pnpm] or [yarn] + + + + +```bash +npm install ngx-editor +``` + + + + +```bash +pnpm install ngx-editor +``` + + + ```bash -npm install ngx-editor --save -# or yarn add ngx-editor ``` + + + ### Usage Import `ngx-editor` module -```ts +```ts title="app.module.ts" import { NgxEditorModule } from 'ngx-editor'; @NgModule({ @@ -29,7 +48,7 @@ export class AppModule {} Initialize editor in the component -```ts +```ts title="app.component.ts" import { Editor } from 'ngx-editor'; export class AppComponent implements OnInit, OnDestroy { @@ -47,7 +66,7 @@ export class AppComponent implements OnInit, OnDestroy { Then in HTML -```html +```html title="app.component.html" ``` @@ -57,3 +76,4 @@ For `ngModel` to work, You must import `FormsModule` from `@angular/forms` [npm]: https://www.npmjs.com/ [yarn]: https://yarnpkg.com/lang/en/ +[pnpm]: https://pnpm.io/ diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 0d8deffd..6b223ef5 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -4,6 +4,6 @@ "baseUrl": ".", "paths": { "@Components/*": ["src/components/*"], - } - } + }, + }, }