Merge remote-tracking branch 'upstream/main' into add-sync-block

# Conflicts:
#	src/components/block.vue

Author: janniks

.prettierrc

@@ -0,0 +1 @@
+{}

README.md

@@ -188,6 +188,7 @@ Most common block types are supported. We happily accept pull requests to add su
 | Cover             | ✅ Yes         | Enable with `fullPage` |
 | Equations         | ✅ Yes         |                        |
 | Checkbox          | ✅ Yes         |                        |
+| Simple Tables     | ✅ Yes         |                        |
 | Databases         | ❌ Not planned |                        |
 | Table Of Contents | ❌ Not planned |                        |
 

dev/serve.vue

@@ -22,8 +22,9 @@ export default {
   async created() {
     // react-notion tester: 2e22de6b770e4166be301490f6ffd420
     // equation tester: 2a1d5226d68246deba627012081693f9
+    // table tester: bd1de400a8b349dc824f4f00e61d0797
     // todo tester: 235057194b954a60ace89c052a65d102
-    this.blockMap = await getPageBlocks("4bdce11cd93544e5b96e5b1857cea6dc");
+    this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
   },
 };
 </script>

docs/README.md

@@ -14,10 +14,12 @@
 The `NotionRenderer` component offers a few properties
 
 - [`blockMap`](#blockMap) – required
+- [`blockOverrides`](#blockOverrides) – default: `{}`
 - [`contentId`](#contentId) – default: `undefined`
 - [`embedAllow`](#embedAllow) – default: `"fullscreen"`
 - [`fullPage`](#fullPage) – default: `false`
 - [`hideList`](#hideList) – default: `[]`
+- [`imageOptions`](#imageOptions) – default: `undefined`
 - [`mapImageUrl`](#mapImageUrl) – default: `defaultMapImageUrl()`
 - [`mapPageUrl`](#mapPageUrl) – default: `defaultMapPageUrl()`
 - [`pageLinkOptions`](#pageLinkOptions) – default: `undefined`
@@ -31,6 +33,19 @@ The `NotionRenderer` component offers a few properties
 – the blocks part of a Notion API response.
 A list of blocks by their id that may contain contents and properties.
 
+### `blockOverrides`: Object
+
+– the Notion blocks that should be overriden by custom registered Vue components.
+A key-value pair Object of Notion block names to Vue component names.
+
+e.g. to use a custom `code` component—after registering the `CustomCode` Vue component—add the following override, as seen in the `/example`
+
+```js
+blockOverrides: {
+  code: "CustomCode",
+}
+```
+
 ### `contentId`: String
 
 – the id of the block that should be rendered.
@@ -50,6 +65,23 @@ The default allows embeds to enter fullscreen.
 
 – a list of Notion blocks (e.g. `"callout"`) that should not be rendered.
 
+### `imageOptions`: Object
+
+– are used to override default image rendering.
+`imageOptions` is an `Object` that requires a `component` parameter.
+The `src` attribute is optional and defaults to `src`.
+Any additional key value pairs are spread onto the component as element attributes.
+
+e.g. to use `nuxt-img` components instead of HTML `img` elements
+
+```js
+imageOptions: {
+  component: "nuxt-img",
+  "some-attribute": "vue-notion-attr",
+  // src: 'src', // (default) can be overridden to customize the key of the `src` attribute
+}
+```
+
 ### `mapImageUrl`: Function
 
 – a function that receives `(imageUrl: String, block: Object)` and returns a `url: String` that should be used during rendering.
@@ -74,7 +106,8 @@ mapPageUrl(pageId = "") {
 ### `pageLinkOptions`: Object
 
 – are used to override links to other Notion pages with custom Vue components.
-`pageLinkOptions` is an `Object` that requires a `component` and a `href` parameter.
+`pageLinkOptions` is an `Object` that requires a `component` parameter.
+The `href` attribute is optional and defaults to `href`.
 
 e.g., to use `NuxtLink` components instead of HTML `a` elements
 
@@ -190,7 +223,7 @@ There are a few required steps to allow Nuxt to work with vue-notion
 // nuxt.config.js
 export default {
   // ...
-  buildModules: ["vue-notion/nuxt"],
+  buildModules: ["vue-notion/nuxt"]
 };
 ```
 

example/nuxt.config.js

@@ -23,5 +23,8 @@ export default {
   buildModules: ["vue-notion/nuxt"],
 
   // Plugins (e.g. vue-katex for equations)
-  plugins: ["~/plugins/vue-katex.js"],
+  plugins: [
+    "~/plugins/vue-katex.js",
+    "~/plugins/vue-custom-notion-component.js",
+  ],
 };