### Example 'publish-packages' Script with Changesets and Turbo

Source: https://github.com/portive/wysimark/blob/main/CHANGESETS.md

An example npm script for publishing packages. This script uses 'turbo run' to execute linting and testing, followed by 'changeset version' to update package versions and 'changeset publish' to release them to npm.

```json
{
  "scripts": {
    "publish-packages": "turbo run lint test && changeset version && changeset publish"
  }
}
```

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

### Clone and Install Dependencies

Source: https://github.com/portive/wysimark/blob/main/CONTRIBUTING.md

Clones the Wysimark monorepo repository and installs project dependencies using PNPM. This is the initial setup step for contributing.

```shell
git clone https://github.com/portive/wysimark-monorepo.git
cd wysimark-monorepo
pnpm install
```

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

### Run Wysimark Demos

Source: https://github.com/portive/wysimark/blob/main/CONTRIBUTING.md

Starts the Wysimark development demos for different frameworks (React, Standalone, Vue) using PNPM. Changes in Wysimark code will be reflected live without a full rebuild.

```shell
# React
pnpm dev:react

# Standalone
pnpm dev:standalone

# Vue
pnpm dev:vue
```

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

### Python: Basic Hello World Function

Source: https://github.com/portive/wysimark/blob/main/apps/react-demo/content/table.md

A simple Python function that prints 'Hello, World!' to the console. This serves as a basic example of function definition and execution in Python.

```python
def hello_world():
    print("Hello, World!")
    
hello_world()
```

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

### Vue Integration: Component Usage with v-model

Source: https://context7.com/portive/wysimark/llms.txt

Integrates the Wysimark Vue component using v-model for two-way data binding. It includes examples for getting and setting markdown content programmatically and configuring editor dimensions and authentication.

```vue
<template>
  <div>
    <h1>Wysimark Editor for Vue</h1>
    <button @click="clickGetMarkdown">Get Markdown</button>
    <button @click="clickSetMarkdown">Set Markdown</button>

    <wysimark
      ref="wysimark"
      v-model="markdown"
      :height="240"
      :min-height="200"
      :max-height="600"
      :auth-token="authToken"
      placeholder="Type something..."
    />

    <textarea v-model="markdown" style="width: 100%; height: 240px;"></textarea>
  </div>
</template>

<script lang="ts">
import { ref } from "vue"
import Wysimark from "@wysimark/vue"

export default {
  name: "App",
  components: { Wysimark },
  setup() {
    const wysimarkRef = ref<typeof Wysimark>()
    const markdownRef = ref<string>("# Hello World\n\nStart editing...")

    const clickGetMarkdown = () => {
      console.log("Current markdown:", markdownRef.value)
    }

    const clickSetMarkdown = () => {
      markdownRef.value = "# Updated Content\n\nNew paragraph."
    }

    return {
      wysimark: wysimarkRef,
      markdown: markdownRef,
      clickGetMarkdown,
      clickSetMarkdown,
      authToken: process.env.PORTIVE_AUTH_TOKEN
    }
  }
}
</script>
```

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

### Define AnchorCustomTypes for a Sink Plugin

Source: https://github.com/portive/wysimark/blob/main/packages/react/src/sink/README_TYPES.md

An example demonstrating the structure of PluginCustomTypes, specifically AnchorCustomTypes. It defines the Name, Editor, Element, and Text types required for a custom anchor plugin.

```typescript
type AnchorCustomTypes = {
  Name: "Anchor"
  Editor: BaseEditor & ReactEditor & { supportsAnchor: true }
  Element: { type: "anchor"; href: string; children: { text: string }[]] }
  Text: {text: string}
}
```

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

### JavaScript Hello World Function

Source: https://github.com/portive/wysimark/blob/main/apps/react-demo/content/basic.md

A basic JavaScript function that logs 'Hello World' to the console. This snippet demonstrates a simple function declaration and its execution. No external dependencies are required.

```javascript
function hello() {
  console.log("Hello World")
}
```

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

### Initialize Wysimark Standalone Editor

Source: https://context7.com/portive/wysimark/llms.txt

Creates a Wysimark editor instance in a vanilla JavaScript or TypeScript environment using the `@wysimark/standalone` package. The `createWysimark` function takes a container element and configuration options, including `initialMarkdown`, `placeholder`, optional `authToken` for uploads, height settings, and an `onChange` callback. The editor instance provides methods to `getMarkdown`, `setMarkdown`, and `unmount` for cleanup.

```typescript
import { createWysimark } from "@wysimark/standalone"

const container = document.getElementById("editor-container")
const textarea = document.getElementById("textarea") as HTMLTextAreaElement

const wysimark = createWysimark(container, {
  initialMarkdown: "# Hello World\n\nLorem ipsum dolar.",
  placeholder: "Type something...",
  authToken: "your-portive-auth-token", // Optional
  height: 500,
  minHeight: 240,
  maxHeight: 720,
  onChange: (markdown) => {
    textarea.value = markdown
    console.log("Content changed:", markdown)
  }
})

// Get current markdown
const currentContent = wysimark.getMarkdown()

// Set markdown programmatically
wysimark.setMarkdown("# Updated Content\n\nNew paragraph.")

// Cleanup when done
wysimark.unmount()
```

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

### Changesets CLI Commands

Source: https://github.com/portive/wysimark/blob/main/CHANGESETS.md

These are the fundamental commands provided by the Changesets CLI. 'changeset' is used to create new changelog entries, 'changeset version' updates package versions based on the changelogs, and 'changeset publish' uploads the updated packages to npm.

```shell
changeset
changeset version
changeset publish
```

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

### Run Unit Tests

Source: https://github.com/portive/wysimark/blob/main/CONTRIBUTING.md

Executes unit tests for the Wysimark project. This includes running tests once or in watch mode specifically for the 'packages/react' directory, which contains the core conversion algorithms.

```shell
# from root
pnpm test

# cd into `packages/react` first
pnpm test:watch
```

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

### Configure Portive API Token

Source: https://github.com/portive/wysimark/blob/main/CONTRIBUTING.md

Creates a local environment file (.env/local.env) to store the Portive authentication token. This is required for testing upload functionality with Portive.

```dotenv
NEXT_PUBLIC_PORTIVE_AUTH_TOKEN=your-long-auth-token-goes-here
```

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

### Initialize Wysimark React Editor with useEditor Hook

Source: https://context7.com/portive/wysimark/llms.txt

Initializes a Wysimark editor instance within a React application using the `useEditor` hook. Supports configuration for file uploads via `authToken`, and dynamic height adjustments (`minHeight`, `maxHeight`, `height`). The `Editable` component renders the editor, taking the editor instance, markdown value, and an `onChange` handler as props. Optional `placeholder` and `throttleInMs` can also be provided.

```tsx
import { useEditor, Editable } from "@wysimark/react"
import { useState } from "react"

function MyEditor() {
  const [markdown, setMarkdown] = useState("# Hello World\n\nStart editing...")

  const editor = useEditor({
    authToken: process.env.PORTIVE_AUTH_TOKEN, // Optional: enables image/file uploads
    minHeight: 240,
    maxHeight: 720,
    height: undefined // Can be number or string like "500px"
  })

  return (
    <Editable
      editor={editor}
      value={markdown}
      onChange={setMarkdown}
      placeholder="Type your markdown here..."
      throttleInMs={1000} // Optional: throttle onChange calls
    />
  )
}
```

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

### React Editor Configuration: Uploads and Dimensions

Source: https://context7.com/portive/wysimark/llms.txt

Configures the Wysimark React editor with file upload capabilities via `authToken` and responsive dimensions using `height`, `minHeight`, and `maxHeight`. It demonstrates using the `Editable` component and `useEditor` hook.

```tsx
import { useEditor, Editable } from "@wysimark/react"
import { useState } from "react"

function ConfiguredEditor() {
  const [markdown, setMarkdown] = useState("")

  const editor = useEditor({
    // Upload configuration (requires Portive account)
    authToken: process.env.PORTIVE_AUTH_TOKEN,

    // Dimension configuration
    height: "100%",        // Fixed height: number (pixels) or string (CSS)
    minHeight: 240,        // Minimum height in pixels
    maxHeight: 720,        // Maximum height in pixels
  })

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1em" }}>
      <Editable
        editor={editor}
        value={markdown}
        onChange={setMarkdown}
        placeholder="Enter text here..."
        throttleInMs={1000}  // Throttle onChange (default: 1000ms)
        className="custom-editor"
        style={{ border: "1px solid #ccc", borderRadius: "8px" }}
      />
      <pre style={{ background: "#f5f5f5", padding: "1em" }}>
        {markdown}
      </pre>
    </div>
  )
}
```

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

### Synchronize Wysimark Standalone Editor with Textarea

Source: https://context7.com/portive/wysimark/llms.txt

Implements bidirectional synchronization between a Wysimark standalone editor and a textarea element. The editor is initialized with an `onChange` handler that updates the textarea's value. Conversely, an event listener on the textarea updates the editor's content whenever the textarea input changes, ensuring both are always in sync. Button handlers are included to demonstrate fetching and setting markdown content programmatically.

```typescript
import { createWysimark } from "@wysimark/standalone"

const container = document.getElementById("editor-container")
const textarea = document.getElementById("textarea") as HTMLTextAreaElement
const initialMarkdown = "# Hello World\n\nLorem ipsum dolar."

// Create editor with onChange handler
const wysimark = createWysimark(container, {
  initialMarkdown,
  placeholder: "Type something...",
  onChange: (markdown) => {
    textarea.value = markdown
  }
})

// Sync textarea changes back to editor
textarea.addEventListener("input", (e: Event) => {
  const target = e.target as HTMLTextAreaElement
  wysimark.setMarkdown(target.value)
})

textarea.value = initialMarkdown

// Button handlers
document.getElementById("get-markdown")?.addEventListener("click", () => {
  console.log(wysimark.getMarkdown())
})

document.getElementById("set-markdown")?.addEventListener("click", () => {
  wysimark.setMarkdown("# Set the markdown\n\nLorem ipsum dolar.")
})
```

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

### Parse and Serialize Functions: Markdown to Slate

Source: https://context7.com/portive/wysimark/llms.txt

Provides functions to parse markdown strings into Slate.js document structures and serialize Slate documents back into markdown. It requires `@wysimark/react` and `slate` types. The `parse` function takes a markdown string and returns a Slate Descendant array. The `serialize` function takes an array of Slate Elements and returns a markdown string.

```typescript
import { parse, serialize } from "@wysimark/react"
import { Element } from "slate"

// Parse markdown string to Slate document structure
const markdown = "# Hello\n\nThis is **bold** text."
const slateDocument = parse(markdown)
// Returns: Descendant[] (Slate.js node array)

// Serialize Slate document back to markdown
const editor = useEditor({})
const markdownOutput = serialize(editor.children as Element[])
// Returns: string with markdown syntax

// Example with custom processing
function processContent(inputMarkdown: string): string {
  const document = parse(inputMarkdown)
  // Manipulate document structure if needed
  return serialize(document as Element[])
}
```

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

### Control Wysimark React Editor Content Programmatically

Source: https://context7.com/portive/wysimark/llms.txt

Demonstrates programmatic control of a Wysimark editor instance in React using `getMarkdown` and `setMarkdown` methods available through the editor instance obtained via the `useEditor` hook. This allows for fetching the current markdown content or updating it dynamically. The `Editable` component is used for rendering the editor.

```tsx
import { useEditor } from "@wysimark/react"
import { useCallback } from "react"

function EditorWithMethods() {
  const editor = useEditor({
    authToken: process.env.PORTIVE_AUTH_TOKEN,
    minHeight: 240
  })

  const handleGetMarkdown = useCallback(() => {
    const currentMarkdown = editor.getMarkdown()
    console.log("Current content:", currentMarkdown)
  }, [editor])

  const handleSetMarkdown = useCallback(() => {
    editor.setMarkdown("# New Content\n\nThis replaces the editor content.")
  }, [editor])

  return (
    <div>
      <button onClick={handleGetMarkdown}>Get Markdown</button>
      <button onClick={handleSetMarkdown}>Set Markdown</button>
      <Editable
        editor={editor}
        value={markdown}
        onChange={setMarkdown}
      />
    </div>
  )
}
```

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

### Footnote Element Types in TypeScript

Source: https://github.com/portive/wysimark/blob/main/packages/react/src/footnote-plugin/FOOTNOTE_README.md

Defines the TypeScript types for footnote reference and footnote elements. These types specify the structure, including 'type', 'id', and 'children' properties, which are essential for representing footnotes within the editor's data model.

```typescript
type FootnoteRefElement = {
  type: "footnote-ref"
  id: "abcdefg"
  children: Segment[] // inlines
}

type Footnote = {
  type: "footnote"
  id: "abcdefg"
  children: TopLevelBlocks[] // blocks
}
```

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