### Install Development Dependencies

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/README.md

Installs the project dependencies using the pnpm package manager, typically used for development and contribution setup.

```bash
pnpm i
```

--------------------------------

### Install Development Dependencies - pnpm

Source: https://github.com/microvoid/marktion/blob/main/README.md

Installs the project's development dependencies using pnpm. This step is necessary after cloning the repository to set up the development environment for contributing.

```bash
pnpm i
```

--------------------------------

### Install Marktion via npm

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/README.md

Installs the Marktion package and its dependencies using the npm package manager.

```bash
npm intall marktion
```

--------------------------------

### Install Marktion Dependency - npm

Source: https://github.com/microvoid/marktion/blob/main/README.md

Installs the Marktion package using npm. This is the first step to include Marktion in your project as a dependency.

```bash
npm intall marktion
```

--------------------------------

### Initializing Marktion Editor with Plugins (TSX)

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/refactor.md

Demonstrates creating an EditorState with default and custom plugins and rendering the Editor component with state management using React's useState hook.

```tsx
const defaultPlugins = [toolbar(), bubble(), slash(), upload(), placeholder()];

function App() {
  const [state, setState] = useState(function () {
    return EditorState.create({
      plugins: [...defaultPlugins, AIToolkit()]
    });
  });

  return <Editor state={state} onChange={setState} />;
}
```

--------------------------------

### Creating a React Plugin for Marktion Editor (TSX)

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/refactor.md

Illustrates creating a custom plugin using the Plugin.createReactPlugin helper, which allows embedding a React element like a Toolbar within the editor's plugin system.

```tsx
const toolbar = () => {
  return Plugin.createReactPlugin(editor => ({
    reactElement: <Toolbar />
  }));
};
```

--------------------------------

### Integrating AI Plugin - TSX

Source: https://github.com/microvoid/marktion/blob/main/README.md

Illustrates how to integrate the AI plugin with the `ReactEditor`. It uses a `useAI` hook (presumably from a related library like Vercel AI SDK) to obtain the plugin instance and element, passing the plugin to the editor and rendering the element within it. Requires the AI plugin setup and the `useAI` hook.

```tsx
function Editor() {
  const ai = useAI({
    basePath: import.meta.env.VITE_OPENAI_BASE_URL
  });

  return (
    <ReactEditor ref={editorRef} plugins={[ai.plugin]}>
      {ai.element}
    </ReactEditor/>
  )
}
```

--------------------------------

### Defining Editor Component Props (TSX)

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/refactor.md

Shows the TypeScript type definition for the Editor component's props, specifically requiring an EditorState object.

```tsx
type EditorPorps = {
  state: EditorState;
};
function Editor(props: EditorPorps) {}
```

--------------------------------

### Configure ESLint Parser Options - JavaScript

Source: https://github.com/microvoid/marktion/blob/main/examples/with-inline-style/README.md

Configures the ESLint parser options to enable type-aware linting rules. This requires specifying the ECMAScript version, source type, project tsconfig files, and the root directory for tsconfig resolution.

```js
   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },
```

--------------------------------

### Managing State with Context, Immer, and Selectors (TypeScript)

Source: https://github.com/microvoid/marktion/blob/main/packages/use-context-immer/README.md

Illustrates a state management pattern using React Context, Immer's `produce` for creating immutable action creators, and `useContextSelector` for optimized state access. It defines state, an action creator, a selector, and shows how to dispatch actions and select specific state parts in a component.

```typescript
class AppState {
  style = {
    theme: 'light',
    primary: 'tomato'
  };
}

const AppStateContext = createContext(new AppState());

const setDarkMode = produce(draft => {
  draft.style.theme = 'dark';
});

const getThemeMode = (state: AppState) => {
  return state.style.theme;
};

function App() {
  const dispatch = useDispatch();
  const theme = useContextSelector(getThemeMode);

  const onToggle = () => {
    dispatch(setDarkMode);
  };

  return (
    <div>
      theme: {theme}
      <button onClick={onToggle}>Toggle Mode</button>
    </div>
  );
}

render(
  <AppStateContext>
    <App />
  </AppStateContext>,
  rootEl
);
```

--------------------------------

### Accessing Marktion Editor Instance in React

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/README.md

Shows how to use React's useRef hook to get a reference to the Marktion editor instance, allowing access to its methods like getContent for exporting the editor's content.

```tsx
import { ReactEditor, ReactEditorRef } from 'marktion';

function App() {
  const editorRef = useRef<ReactEditorRef>(null);

  const onExport = () => {
    const content = editorRef.current?.editor.getContent();
    console.log(content);
  };

  return (
    <>
      <button onClick={onExport}>export</button>
      <ReactEditor ref={editorRef} />
    </>
  );
}
```

--------------------------------

### Configuring ESLint Parser Options in JavaScript

Source: https://github.com/microvoid/marktion/blob/main/examples/with-vite/README.md

This code snippet shows how to configure the `parserOptions` in an ESLint configuration file. It sets the ECMAScript version, source type, specifies the TypeScript project files for type-aware linting, and defines the root directory.

```JavaScript
   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },
```

--------------------------------

### Configuring ESLint Parser Options for Type Checking

Source: https://github.com/microvoid/marktion/blob/main/apps/docs/README.md

This snippet shows how to configure the `parserOptions` in an ESLint configuration file to enable type-aware linting rules. It specifies the ECMAScript version, module source type, project tsconfig files, and the root directory for tsconfig resolution.

```js
   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },
```

--------------------------------

### Using useSelector with Context and Immer-like Dispatch (TypeScript)

Source: https://github.com/microvoid/marktion/blob/main/packages/use-context-immer/README.md

Demonstrates accessing state and a dispatch function from a React Context using `useSelector`. It shows how to perform immutable state updates by passing a function to `dispatch` that modifies a draft object, typical of Immer integration.

```typescript
const TodoContext = createContext();


function Todo() {
  const todos = useSelector(TodoContext, ctx => ctx.model.todos);
  const dispath = useSelector(TodoContext, ctx => ctx.dispath);

  const onCommit = () => {
    dispath(model => {
      model.todos[0].check = true;
    })
  }
}

function App() {
  return <TodoContext.Provider><Todo /></TodoContext.Provider>
}
```

--------------------------------

### Accessing Marktion Instance via Ref - TSX

Source: https://github.com/microvoid/marktion/blob/main/README.md

Shows how to use a React ref (`useRef`) to get access to the underlying Marktion editor instance (`editorRef.current?.editor`) for performing actions like exporting content. Requires React's `useRef` hook and Marktion's `ReactEditor` and `ReactEditorRef` types.

```tsx
import { ReactEditor, ReactEditorRef } from 'marktion';

function App() {
  const editorRef = useRef<ReactEditorRef>(null);

  const onExport = () => {
    const content = editorRef.current?.editor.getContent();
    console.log(content);
  };

  return (
    <>
      <button onClick={onExport}>export</button>
      <ReactEditor ref={editorRef} />
    </>
  );
}
```

--------------------------------

### Initialize Google Analytics (gtag.js) in JavaScript

Source: https://github.com/microvoid/marktion/blob/main/apps/docs/index.html

This snippet initializes the Google Analytics dataLayer and defines the gtag function, which is used to send data to Google Analytics. It then sends commands to load the analytics script ('js') and configure tracking with the specified measurement ID ('G-950JG28MQC'). This setup is standard for integrating gtag.js.

```JavaScript
window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-950JG28MQC');
```

--------------------------------

### Clone Marktion Repository - bash

Source: https://github.com/microvoid/marktion/blob/main/README.md

Clones the Marktion GitHub repository to your local machine and navigates into the project directory. This is typically the first step when contributing to the project.

```bash
git clone https://github.com/yourusername/marktion.git
cd marktion
```

--------------------------------

### Basic React Editor Usage

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/README.md

Demonstrates the basic usage of the ReactEditor component from the marktion library, including importing the component and its styles, and rendering it with initial content.

```tsx
import { ReactEditor } from 'marktion';
import 'marktion/dist/style.css';

function Editor() {
  return <ReactEditor content={`# Hello World`} />;
}
```

--------------------------------

### Styling for Marktion Components and Layout (CSS)

Source: https://github.com/microvoid/marktion/blob/main/packages/storybook/stories/Configure.mdx

This CSS block provides styling rules for specific classes like .sb-addon-text and .sb-addon-img, managing padding, positioning, dimensions, and image transformations. It also includes media queries to adjust the layout and styles for screens smaller than 800px and 600px, ensuring responsiveness.

```CSS
.sb-addon-text {
  padding-left: 48px;
  max-width: 240px;
}

.sb-addon-text h4 {
  padding-top: 0px;
}

.sb-addon-img {
  position: absolute;
  left: 345px;
  top: 0;
  height: 100%;
  width: 200%;
  overflow: hidden;
}

.sb-addon-img img {
  width: 650px;
  transform: rotate(-15deg);
  margin-left: 40px;
  margin-top: -72px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
  backface-visibility: hidden;
}

@media screen and (max-width: 800px) {
  .sb-addon-img {
    left: 300px;
  }
}

@media screen and (max-width: 600px) {
  .sb-section {
    flex-direction: column;
  }

  .sb-features-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .sb-socials {
    grid-template-columns: repeat(2, 1fr);
  }

  .sb-addon {
    height: 280px;
    align-items: flex-start;
    padding-top: 32px;
    overflow: hidden;
  }

  .sb-addon-text {
    padding-left: 24px;
  }

  .sb-addon-img {
    right: 0;
    left: 0;
    top: 130px;
    bottom: 0;
    overflow: hidden;
    height: auto;
    width: 124%;
  }

  .sb-addon-img img {
    width: 1200px;
    transform: rotate(-12deg);
    margin-left: 0;
    margin-top: 48px;
    margin-bottom: -40px;
    margin-left: -24px;
  }
}
```

--------------------------------

### Navigate to Repository Directory

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/README.md

Changes the current directory in the terminal to the cloned Marktion repository directory.

```bash
cd marktion
```

--------------------------------

### Clone Marktion Repository

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/README.md

Clones the forked Marktion repository from GitHub to the local machine using the git command-line tool.

```bash
git clone https://github.com/yourusername/marktion.git
```

--------------------------------

### Basic React Editor Usage - TSX

Source: https://github.com/microvoid/marktion/blob/main/README.md

Demonstrates how to import and use the `ReactEditor` component from Marktion, initializing it with some basic Markdown content. Requires the Marktion package and its associated styles.

```tsx
import { ReactEditor } from 'marktion';
import 'marktion/dist/style.css';

function Editor() {
  return <ReactEditor content={`# Hello World`} />;
}
```

--------------------------------

### Executing Prisma Migration and Generation Commands (Bash)

Source: https://github.com/microvoid/marktion/blob/main/apps/site/prisma/README.md

This snippet shows how to use `pnpm exec` to run key Prisma CLI commands. It includes commands for generating and applying migrations (`migrate dev`), generating TypeScript types from the schema (`generate`), and deploying migrations to a production database (`migrate deploy`).

```bash
# gen migrate and apply to database
pnpm exec prisma migrate dev --name why-change

# gen ts type
pnpm exec prisma generate

# deploy to new db
pnpm exec prisma migrate deploy
```

--------------------------------

### Integrating AI Plugin in React Editor

Source: https://github.com/microvoid/marktion/blob/main/packages/marktion/README.md

Illustrates how to integrate the AI plugin into the ReactEditor component by using the useAI hook to create the plugin instance and passing it to the plugins prop.

```tsx
function Editor() {
  const ai = useAI({
    basePath: import.meta.env.VITE_OPENAI_BASE_URL
  });

  return <ReactEditor ref={editorRef} plugins={[ai.plugin]} />;
}
```

--------------------------------

### Importing Assets for Storybook Page

Source: https://github.com/microvoid/marktion/blob/main/packages/storybook/stories/Configure.mdx

Imports various image assets (SVGs and PNGs) and the `Meta` component from Storybook for use within the documentation page.

```JavaScript
import { Meta } from "@storybook/blocks";

import Github from "./assets/github.svg";
import Discord from "./assets/discord.svg";
import Youtube from "./assets/youtube.svg";
import Tutorials from "./assets/tutorials.svg";
import Styling from "./assets/styling.png";
import Context from "./assets/context.png";
import Assets from "./assets/assets.png";
import Docs from "./assets/docs.png";
import Share from "./assets/share.png";
import FigmaPlugin from "./assets/figma-plugin.png";
import Testing from "./assets/testing.png";
import Accessibility from "./assets/accessibility.png";
import Theming from "./assets/theming.png";
import AddonLibrary from "./assets/addon-library.png";
```

--------------------------------

### Storybook Page Configuration (Meta)

Source: https://github.com/microvoid/marktion/blob/main/packages/storybook/stories/Configure.mdx

Uses the Storybook `Meta` component to configure the current documentation page, specifically setting its title which is often displayed in the Storybook UI.

```MDX
<Meta title="Configure your project" />
```

--------------------------------

### Styling Storybook Sections and Elements with CSS

Source: https://github.com/microvoid/marktion/blob/main/packages/storybook/stories/Configure.mdx

This CSS block defines the visual styling for various sections and elements within the Storybook UI, including layout for feature grids, social links, addon sections, and basic styling for text, images, and links. It uses flexbox and grid for layout and sets margins, padding, fonts, and colors.

```css
.sb-container {
  margin-bottom: 48px;
}

.sb-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

img {
  object-fit: cover;
}

.sb-section-title {
  margin-bottom: 32px;
}

.sb-section a:not(h1 a, h2 a, h3 a) {
  font-size: 14px;
}

.sb-section-item, .sb-grid-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sb-section-item-heading {
  padding-top: 20px !important;
  padding-bottom: 5px !important;
  margin: 0 !important;
}
.sb-section-item-paragraph {
  margin: 0;
  padding-bottom: 10px;
}

.sb-chevron {
  margin-left: 5px;
}

.sb-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 32px 20px;
}

.sb-socials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sb-socials p {
  margin-bottom: 10px;
}

.sb-explore-image {
  max-height: 32px;
  align-self: flex-start;
}

.sb-addon {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  background-color: #EEF3F8;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #EEF3F8;
  height: 180px;
  margin-bottom: 48px;
  overflow: hidden;
}
```

--------------------------------

### React Component for Right Arrow SVG

Source: https://github.com/microvoid/marktion/blob/main/packages/storybook/stories/Configure.mdx

Defines a reusable React functional component `RightArrow` that renders an inline SVG graphic of a right arrow with specific styling for size, alignment, and color.

```JSX
export const RightArrow = () => <svg 
    viewBox="0 0 14 14" 
    width="8px" 
    height="14px" 
    style={{
      marginLeft: '4px',
      display: 'inline-block',
      shapeRendering: 'inherit',
      verticalAlign: 'middle',
      fill: 'currentColor',
      'path fill': 'currentColor'
    }}
>
  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
</svg>
```

--------------------------------

### Sending Channel Messages from React ArticleList Component (TypeScript)

Source: https://github.com/microvoid/marktion/blob/main/packages/use-channel/README.md

This snippet illustrates a React functional component (`ArticleList`) that uses the `useChannel` hook to obtain an instance of the `EditArticleChannel`. It defines an event handler (`onEditItem`) that sends a message containing the component's `props.value` onto the channel, allowing other components subscribed to the same channel to receive this data.

```typescript
function ArticleList() {
  const channel = useChannel(EditArticleChannel);

  const onEditItem = () => {
    channel.message(props.value);
  };
}
```

--------------------------------

### Receiving Channel Messages in React Editor Component (TypeScript)

Source: https://github.com/microvoid/marktion/blob/main/packages/use-channel/README.md

This snippet shows a React functional component (`Editor`) that uses the `useChannel` hook to subscribe to the `EditArticleChannel`. It listens for incoming messages (presumably `Article` objects) and updates its local state (`current`) when a new message arrives. It also sends a message on the channel whenever the component's `props.value` changes.

```typescript
// editor.tsx

export const EditArticleChannel = createChannel<Article[]>();

function Editor() {
  const [current, setCurrent] = useState<Article | null>(null);
  const channel = useChannel(EditArticleChannel);

  useEffect(() => {
    const followArticle = channel.messages().pop();

    if (followArticle && followArticle != current) {
      setCurrent(followArticle);
    }
  }, [channel, article]);

  useEffect(() => {
    channel.message(props.value);
  }, [props.value]);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.