docs: run prettier

.prettierrc.yml

@@ -9,3 +9,6 @@ overrides:
   - files: '*.astro'
     options:
       parser: 'astro'
+  - files: '*.{md,mdx}'
+    options:
+      printWidth: 80

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;
 }

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.

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)' : ''}`,
+);
 ```

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"
 <form [formGroup]="form">
   <div class="NgxEditor__Wrapper">
     <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>

docs/src/content/docs/examples/mentions.mdx

@@ -43,7 +43,9 @@ import { getMentionsPlugin } from 'prosemirror-mentions';
  */
 var getMentionSuggestionsHTML = (items) =>
   '<div class="suggestion-item-list">' +
-  items.map((i) => '<div class="suggestion-item">' + i.name + '</div>').join('') +
+  items
+    .map((i) => '<div class="suggestion-item">' + i.name + '</div>')
+    .join('') +
   '</div>';
 
 /**
@@ -52,7 +54,9 @@ var getMentionSuggestionsHTML = (items) =>
  */
 var getTagSuggestionsHTML = (items) =>
   '<div class="suggestion-item-list">' +
-  items.map((i) => '<div class="suggestion-item">' + i.tag + '</div>').join('') +
+  items
+    .map((i) => '<div class="suggestion-item">' + i.tag + '</div>')
+    .join('') +
   '</div>';
 
 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([

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"
 <form [formGroup]="form">
   <ngx-editor [editor]="editor" formControlName="editorContent"></ngx-editor>
 </form>

docs/src/content/docs/index.mdx

@@ -22,12 +22,13 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <CardGrid stagger>
   <Card title="Built with prosemirror" icon="rocket">
-    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.
   </Card>
   <Card title="Easy to integrate" icon="pencil">
-    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
   </Card>
   <Card title="Install" icon="setting">
     Run `npm install ngx-editor` to get started

docs/src/content/docs/introduction.md → 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]
 
+<Tabs>
+  <TabItem label="npm">
+
 ```bash
 npm install ngx-editor
-# or
+```
+
+  </TabItem>
+  <TabItem label="pnpm">
+
+```bash
 pnpm install ngx-editor
-# or
+```
+
+  </TabItem>
+  <TabItem label="yarn">
+
+```bash
 yarn add ngx-editor
 ```
 
+  </TabItem>
+</Tabs>
+
 ### 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
 <div class="NgxEditor__Wrapper">
   <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
-  <ngx-editor [editor]="editor" [ngModel]="html" [disabled]="false" [placeholder]="'Type here...'"></ngx-editor>
+  <ngx-editor
+    [editor]="editor"
+    [ngModel]="html"
+    [disabled]="false"
+    [placeholder]="'Type here...'"
+  ></ngx-editor>
 </div>
 ```
 
@@ -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.

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
-<ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [colorPresets]="colorPresets"> </ngx-editor-menu>
+```html title="app.component.html"
+<ngx-editor-menu
+  [editor]="editor"
+  [toolbar]="toolbar"
+  [colorPresets]="colorPresets"
+>
+</ngx-editor-menu>
 ```
 
 ## Custom Menu
@@ -57,7 +60,12 @@ Note: The input is just a `TemplateRef`, the menu component will render whatever
 #### Editor
 
 ```html
-<ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [customMenuRef]="customMenu"> </ngx-editor-menu>
+<ngx-editor-menu
+  [editor]="editor"
+  [toolbar]="toolbar"
+  [customMenuRef]="customMenu"
+>
+</ngx-editor-menu>
 
 <!-- Create template reference -->
 <ng-template #customMenu>
@@ -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';

docs/src/content/docs/migrations/migration-5-6.md

@@ -44,7 +44,12 @@ export class AppComponent implements OnInit, OnDestroy {
 HTML
 
 ```html
-<ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [colorPresets]="colorPresets"> </ngx-editor-menu>
+<ngx-editor-menu
+  [editor]="editor"
+  [toolbar]="toolbar"
+  [colorPresets]="colorPresets"
+>
+</ngx-editor-menu>
 ```
 
 ## CustomMenu

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
-<ngx-editor [editor]="editor" focusOut="onBlur()" focusIn="onFocus()"></ngx-editor>
+<ngx-editor
+  [editor]="editor"
+  focusOut="onBlur()"
+  focusIn="onFocus()"
+></ngx-editor>
 ```
 
 #### Remvoed Editor.enable and Editor.disable methods

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
-<div style="background: orange">Example text with example custom container with inline style</div>
+<div style="background: orange">
+  Example text with example custom container with inline style
+</div>
 ```
 
 Lets take this HTML and and write a schema to retain background property.