docs: add placeholder extension (remirror#1038)

docs/extensions/placeholder-extension.md

@@ -0,0 +1,44 @@
+---
+hide_title: true
+title: 'PlaceholderExtension'
+---
+
+# `PlaceholderExtension`
+
+## Summary
+
+This extension shows a placeholder when the **ProseMirror** content of your editor is empty.
+
+## Features
+
+### Custom styling
+
+The placeholder can be styled with a custom CSS class.
+
+## Usage
+
+### Installation
+
+This extension is installed for you when you install the main `remirror` package.
+
+You can use the imports in the following way.
+
+```ts
+import { placeholderExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-placeholder` package. There are two ways of pulling it into your project.
+
+### Examples
+
+See [storybook](https://remirror.vercel.app/?path=/story/placeholder-extension--basic) for examples.
+
+## API
+
+### Options
+
+### Commands
+
+### Helpers

packages/remirror__extension-placeholder/__stories__/placeholder-extension.stories.tsx

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { PlaceholderExtension } from 'remirror/extensions';
+import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';
+
+import './styles.css';
+
+export default { title: 'Placeholder Extension' };
+
+export const Basic = (): JSX.Element => {
+  const extensions = useCallback(
+    () => [new PlaceholderExtension({ placeholder: `I'm a placeholder!` })],
+    [],
+  );
+  const { manager } = useRemirror({ extensions });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} />
+    </ThemeProvider>
+  );
+};
+
+export const CustomStyle = (): JSX.Element => {
+  const extensions = useCallback(
+    () => [
+      new PlaceholderExtension({
+        placeholder: `I'm a styled placeholder!`,
+        emptyNodeClass: 'my-placeholder',
+      }),
+    ],
+    [],
+  );
+  const { manager } = useRemirror({ extensions });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} />
+    </ThemeProvider>
+  );
+};

packages/remirror__extension-placeholder/__stories__/styles.css

@@ -0,0 +1,3 @@
+.my-placeholder::before {
+  color: red !important;
+}

packages/remirror__extension-placeholder/__stories__/tsconfig.json

@@ -0,0 +1,56 @@
+{
+  "__AUTO_GENERATED__": [
+    "To update the configuration edit the following field.",
+    "`package.json > @remirror > tsconfigs > '__stories__'`",
+    "",
+    "Then run: `pnpm -w generate:ts`"
+  ],
+  "extends": "../../../support/tsconfig.base.json",
+  "compilerOptions": {
+    "types": [],
+    "declaration": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "importsNotUsedAsValues": "remove",
+    "paths": {
+      "react": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@[email protected]_dfad392d5450b8683a621f3ec486af19/node_modules/@storybook/react/types-6-0.d.ts"
+      ],
+      "@remirror/dev": ["../../remirror__dev/src/index.ts"]
+    }
+  },
+  "include": ["./"],
+  "references": [
+    {
+      "path": "../../testing/src"
+    },
+    {
+      "path": "../../remirror/src"
+    },
+    {
+      "path": "../../remirror__core/src"
+    },
+    {
+      "path": "../../remirror__messages/src"
+    },
+    {
+      "path": "../../remirror__theme/src"
+    }
+  ]
+}

support/root/tsconfig.json

@@ -329,6 +329,9 @@
     {
       "path": "packages/remirror__extension-paragraph/src"
     },
+    {
+      "path": "packages/remirror__extension-placeholder/__stories__"
+    },
     {
       "path": "packages/remirror__extension-placeholder/__tests__"
     },