feat: Add 'scrollTo' prop

README.md

@@ -78,6 +78,11 @@ A React component that will be wrapped around items that have an optional toolti
 
 A number that will offset the document headings by a number of levels. For example, if you already nest the editor under a main `h1` title you might want the user to only be able to create `h2` headings and below, in this case you would set the prop to `1`.
 
+#### `scrollTo`
+
+A string representing a heading anchor – the document will smooth scroll so that the heading is visible
+in the viewport.
+
 #### `embeds`
 
 Optionally define embeds which will be inserted in place of links when the `matcher` function returns a truthy value. The matcher method's return value will be available on the component under `props.attrs.matches`. If `title` and `icon` are provided then the embed will also appear in the block menu.

example/src/index.js

@@ -105,6 +105,7 @@ class Example extends React.Component {
           readOnlyWriteCheckboxes
           value={this.state.value}
           defaultValue={defaultValue}
+          scrollTo={window.location.hash}
           handleDOMEvents={{
             focus: () => console.log("FOCUS"),
             blur: () => console.log("BLUR"),

src/index.tsx

@@ -81,6 +81,7 @@ export type Props = {
   dark?: boolean;
   theme?: typeof theme;
   headingsOffset?: number;
+  scrollTo?: string;
   handleDOMEvents?: {
     [name: string]: (view: EditorView, event: Event) => boolean;
   };
@@ -155,7 +156,10 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
 
   componentDidMount() {
     this.init();
-    this.scrollToAnchor();
+
+    if (this.props.scrollTo) {
+      this.scrollToAnchor(this.props.scrollTo);
+    }
 
     if (this.props.readOnly) return;
 
@@ -179,6 +183,10 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
       });
     }
 
+    if (this.props.scrollTo && this.props.scrollTo !== prevProps.scrollTo) {
+      this.scrollToAnchor(this.props.scrollTo);
+    }
+
     // Focus at the end of the document if switching from readOnly and autoFocus
     // is set to true
     if (prevProps.readOnly && !this.props.readOnly && this.props.autoFocus) {
@@ -416,8 +424,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
     return view;
   }
 
-  scrollToAnchor() {
-    const { hash } = window.location;
+  scrollToAnchor(hash: string) {
     if (!hash) return;
 
     try {