(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[278],{69457:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/editor-api/manipulating-inline-content",function(){return n(3841)}])},3841:function(e,t,n){"use strict";n.r(t),n.d(t,{__toc:function(){return r}});var i=n(24246),s=n(29304),o=n(33756),a=n(7854);n(37090);var l=n(31441);let r=[{depth:2,value:"Partial Inline Content",id:"partial-inline-content"},{depth:2,value:"Inserting Inline Content",id:"inserting-inline-content"},{depth:2,value:"Accessing Styles",id:"accessing-styles"},{depth:2,value:"Adding Styles",id:"adding-styles"},{depth:2,value:"Removing Styles",id:"removing-styles"},{depth:2,value:"Toggling Styles",id:"toggling-styles"},{depth:2,value:"Accessing Selected Text",id:"accessing-selected-text"},{depth:2,value:"Accessing Selected Link",id:"accessing-selected-link"},{depth:2,value:"Creating a Link",id:"creating-a-link"}];function c(e){let t=Object.assign({h1:"h1",p:"p",code:"code",h2:"h2",pre:"pre",span:"span",a:"a"},(0,l.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{children:"Manipulating Inline Content"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"BlockNoteEditor"})," exposes a number of functions to interact with the currently selected content."]}),"\n",(0,i.jsx)(t.h2,{id:"partial-inline-content",children:"Partial Inline Content"}),"\n",(0,i.jsxs)(t.p,{children:["When retrieving inline content from the editor, you always receive complete ",(0,i.jsx)(t.code,{children:"InlineContent"})," objects.\nFor updating or creating inline content, you don't need to pass all properties, and you can use a ",(0,i.jsx)(t.code,{children:"PartialInlineContent"})," type instead:"]}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"PartialLink"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  type"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"link"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  content"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"StyledText"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"[];"})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  href"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"};"})}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"PartialInlineContent"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"PartialLink"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"StyledText"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:")[];"})]})]})}),"\n",(0,i.jsx)(t.h2,{id:"inserting-inline-content",children:"Inserting Inline Content"}),"\n",(0,i.jsx)(t.p,{children:"You can insert inline content using the following function:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"insertInlineContent"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(content: PartialInlineContent)"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".insertInlineContent"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(["})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Hello "'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  { type"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"text"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" text"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"World"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" styles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" { bold"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" } }"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"]);"})})]})}),"\n",(0,i.jsx)(t.h2,{id:"accessing-styles",children:"Accessing Styles"}),"\n",(0,i.jsxs)(t.p,{children:["You can get the styles at the current ",(0,i.jsx)(t.a,{href:"/docs/editor-api/cursor-selections#text-cursor",children:"Text Cursor Position"})," using the following function:"]}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"getActiveStyles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(): Styles;"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"styles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".getActiveStyles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),"\n",(0,i.jsxs)(t.p,{children:["If a ",(0,i.jsx)(t.a,{href:"/docs/editor-api/cursor-selections#selections",children:"Selection"})," is active, this function returns the active styles at the end of the selection."]}),"\n",(0,i.jsx)(t.h2,{id:"adding-styles",children:"Adding Styles"}),"\n",(0,i.jsx)(t.p,{children:"You can add styles to the currently selected text using the following function:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"addStyles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(styles: Styles): "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".addStyles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"({ textColor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"red"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" });"})]})]})}),"\n",(0,i.jsx)(t.h2,{id:"removing-styles",children:"Removing Styles"}),"\n",(0,i.jsx)(t.p,{children:"You can remove styles from the currently selected text using the following function:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"removeStyles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(styles: Styles): "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".removeStyles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"({ bold"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" });"})]})]})}),"\n",(0,i.jsx)(t.h2,{id:"toggling-styles",children:"Toggling Styles"}),"\n",(0,i.jsx)(t.p,{children:"You can toggle styles on the currently selected text using the following function:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"toggleStyles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(styles: Styles): "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".toggleStyles"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"({ bold"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" italic"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" });"})]})]})}),"\n",(0,i.jsx)(t.h2,{id:"accessing-selected-text",children:"Accessing Selected Text"}),"\n",(0,i.jsx)(t.p,{children:"You can get the currently selected text using the following function:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"getSelectedText"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(): string;"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"text"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".getSelectedText"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),"\n",(0,i.jsx)(t.h2,{id:"accessing-selected-link",children:"Accessing Selected Link"}),"\n",(0,i.jsx)(t.p,{children:"You can get the URL of the link in the current selection the following function:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"getSelectedLink"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(): string "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"undefined"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"linkUrl"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".getSelectedLink"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),"\n",(0,i.jsxs)(t.p,{children:["If there are multiple links in the selection, this function only returns the last one's URL. If there are no links, returns ",(0,i.jsx)(t.code,{children:"undefined"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"creating-a-link",children:"Creating a Link"}),"\n",(0,i.jsx)(t.p,{children:"You can create a new link using the following function:"}),"\n",(0,i.jsx)(t.pre,{"data-language":"typescript","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"typescript","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:"createLink"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"(url: string"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" text"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" string): "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:"void"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:" "}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// Usage"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-constant)"},children:"editor"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-function)"},children:".createLink"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"https://www.blocknotejs.org/"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"BlockNote"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})]})}),"\n",(0,i.jsxs)(t.p,{children:["If a ",(0,i.jsx)(t.a,{href:"/docs/editor-api/cursor-selections#selections",children:"Selection"})," is active, the new link will replace the currently selected content."]})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,l.a)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(c,{...e})}):c(e)},pageOpts:{filePath:"pages/docs/editor-api/manipulating-inline-content.mdx",route:"/docs/editor-api/manipulating-inline-content",frontMatter:{title:"Manipulating Inline Content",imageTitle:"Manipulating Inline Content",path:"/docs/block-content"},timestamp:1728895376e3,pageMap:[{kind:"Meta",data:{"*":{type:"page"},index:{type:"page",display:"hidden",theme:{layout:"raw",sidebar:!1,toc:!0},title:"Index"},docs:{title:"Docs",display:"children"},examples:{title:"Examples",display:"children"},pricing:{type:"page",theme:{layout:"raw",sidebar:!0,toc:!0},title:"Pricing"},about:"About"}},{kind:"MdxPage",name:"about",route:"/about"},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{index:"Introduction",quickstart:"Quickstart","editor-basics":"Editor Basics","editor-api":"Editor API","styling-theming":"Styling & Theming","ui-components":"UI Components","custom-schemas":"Custom Schemas",advanced:"Advanced","discord-link":{title:"Community ↗",href:"https://discord.gg/Qc2QTTH5dF",newWindow:!0}}},{kind:"Folder",name:"advanced",route:"/docs/advanced",children:[{kind:"MdxPage",name:"ariakit",route:"/docs/advanced/ariakit",frontMatter:{title:"BlockNote with Ariakit",description:"Ariakit rich text editor with BlockNote",imageTitle:"BlockNote with Ariakit"}},{kind:"MdxPage",name:"grid-suggestion-menus",route:"/docs/advanced/grid-suggestion-menus",frontMatter:{title:"Grid Suggestion Menus",description:"In addition to displaying Suggestion Menus as stacks, BlockNote also supports displaying them as grids.",imageTitle:"Grid Suggestion Menus"}},{kind:"MdxPage",name:"nextjs",route:"/docs/advanced/nextjs",frontMatter:{title:"Next.js and BlockNote",description:"Details on integrating BlockNote with Next.js",imageTitle:"Next.js and BlockNote"}},{kind:"MdxPage",name:"real-time-collaboration",route:"/docs/advanced/real-time-collaboration",frontMatter:{title:"Real-time Collaborative rich text editor",description:"Let's see how you can add Multiplayer capabilities to your BlockNote setup, and allow real-time collaboration between users (similar to Google Docs)",imageTitle:"Real-time Collaboration"}},{kind:"MdxPage",name:"shadcn",route:"/docs/advanced/shadcn",frontMatter:{title:"BlockNote with ShadCN and Tailwind",description:"ShadCN + Tailwind rich text editor using BlockNote",imageTitle:"BlockNote with ShadCN and Tailwind"}},{kind:"MdxPage",name:"vanilla-js",route:"/docs/advanced/vanilla-js",frontMatter:{title:"Usage Without React (Vanilla JS)",description:"BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps, but can also be used in vanilla JavaScript apps.",imageTitle:"Usage Without React (Vanilla JS)"}},{kind:"Meta",data:{ariakit:"BlockNote with Ariakit",shadcn:"BlockNote with ShadCN and Tailwind","grid-suggestion-menus":"Grid Suggestion Menus",nextjs:"Next.js and BlockNote","real-time-collaboration":"Real-time Collaborative rich text editor","vanilla-js":"Usage Without React (Vanilla JS)"}}]},{kind:"Folder",name:"custom-schemas",route:"/docs/custom-schemas",children:[{kind:"MdxPage",name:"custom-blocks",route:"/docs/custom-schemas/custom-blocks"},{kind:"MdxPage",name:"custom-inline-content",route:"/docs/custom-schemas/custom-inline-content"},{kind:"MdxPage",name:"custom-styles",route:"/docs/custom-schemas/custom-styles"},{kind:"Meta",data:{"custom-blocks":"Custom Blocks","custom-inline-content":"Custom Inline Content","custom-styles":"Custom Styles"}}]},{kind:"MdxPage",name:"custom-schemas",route:"/docs/custom-schemas",frontMatter:{title:"Custom Schemas",description:"Learn how to create custom schemas for your BlockNote editor"}},{kind:"Folder",name:"editor-api",route:"/docs/editor-api",children:[{kind:"Meta",data:{"manipulating-blocks":"Manipulating Blocks","manipulating-inline-content":"Manipulating Inline Content","cursor-selections":"Cursor & Selections","converting-blocks":"Markdown & HTML","server-processing":"Server-side processing"}},{kind:"MdxPage",name:"converting-blocks",route:"/docs/editor-api/converting-blocks",frontMatter:{title:"Markdown & HTML",description:"It's possible to export or import Blocks to and from Markdown and HTML.",imageTitle:"Markdown & HTML",path:"/docs/converting-blocks"}},{kind:"MdxPage",name:"cursor-selections",route:"/docs/editor-api/cursor-selections",frontMatter:{title:"Cursor & Selections",description:"If you want to know which block(s) the user is currently editing, you can do so using cursor positions and selections.",imageTitle:"Cursor & Selections",path:"/docs/cursor-selections"}},{kind:"MdxPage",name:"manipulating-blocks",route:"/docs/editor-api/manipulating-blocks",frontMatter:{title:"Manipulating Blocks",description:"How to read Blocks from the editor, and how to create / remove / update Blocks.",imageTitle:"Manipulating Blocks",path:"/docs/manipulating-blocks"}},{kind:"MdxPage",name:"manipulating-inline-content",route:"/docs/editor-api/manipulating-inline-content",frontMatter:{title:"Manipulating Inline Content",imageTitle:"Manipulating Inline Content",path:"/docs/block-content"}},{kind:"MdxPage",name:"server-processing",route:"/docs/editor-api/server-processing",frontMatter:{title:"Server-side processing",description:"Use `ServerBlockNoteEditor` to process Blocks on the server.",imageTitle:"Server-side processing",path:"/docs/server-side-processing"}}]},{kind:"MdxPage",name:"editor-api",route:"/docs/editor-api"},{kind:"Folder",name:"editor-basics",route:"/docs/editor-basics",children:[{kind:"Meta",data:{setup:"Editor Setup","document-structure":"Document Structure","default-schema":"Default Schema"}},{kind:"MdxPage",name:"default-schema",route:"/docs/editor-basics/default-schema",frontMatter:{title:"Default Content Types",description:"BlockNote supports a variety on built-in block and inline content types that are included in the editor by default.",imageTitle:"Default Content Types"}},{kind:"MdxPage",name:"document-structure",route:"/docs/editor-basics/document-structure",frontMatter:{description:"Learn how documents (the content of the rich text editor) are structured to make the most out of BlockNote."}},{kind:"MdxPage",name:"setup",route:"/docs/editor-basics/setup",frontMatter:{description:"Learn how to setup your BlockNote editor using the `useCreateBlockNote` hook and the ``BlockNoteView` component."}}]},{kind:"MdxPage",name:"editor-basics",route:"/docs/editor-basics"},{kind:"MdxPage",name:"index",route:"/docs",frontMatter:{title:"Introduction to BlockNote",imageTitle:"Introduction to BlockNote",path:"/docs/introduction"}},{kind:"MdxPage",name:"quickstart",route:"/docs/quickstart",frontMatter:{title:"Quickstart",description:"Getting started with BlockNote is quick and easy. All you need to do is install the package and add the React component to your app!",imageTitle:"Quickstart",path:"/docs/quickstart"}},{kind:"Folder",name:"styling-theming",route:"/docs/styling-theming",children:[{kind:"Meta",data:{themes:"Themes","overriding-css":"Overriding CSS","adding-dom-attributes":"Adding DOM Attributes"}},{kind:"MdxPage",name:"adding-dom-attributes",route:"/docs/styling-theming/adding-dom-attributes",frontMatter:{title:"Adding DOM Attributes",description:"BlockNote allows you to change how the editor UI looks. You can change the theme of the default UI, or override its CSS styles.",imageTitle:"Styling & Theming",path:"/docs/theming"}},{kind:"MdxPage",name:"overriding-css",route:"/docs/styling-theming/overriding-css",frontMatter:{title:"Overriding CSS",description:"You can change any styles applied to the editor by setting your own CSS styles.",imageTitle:"Overriding CSS",path:"/docs/styling-theming/overriding-css"}},{kind:"MdxPage",name:"themes",route:"/docs/styling-theming/themes",frontMatter:{title:"Themes",description:"Themes let you quickly change the basic look of the editor UI, including colors, borders, shadows, and font.",imageTitle:"Themes",path:"/docs/styling-theming/theming"}}]},{kind:"MdxPage",name:"styling-theming",route:"/docs/styling-theming",frontMatter:{title:"Styling & Theming",description:"You can completely change the look and feel of the BlockNote editor. Change basic styling quickly with theme CSS variables, or apply more complex styles with additional CSS rules.",imageTitle:"Styling & Theming",path:"/docs/styling-theming"}},{kind:"Folder",name:"ui-components",route:"/docs/ui-components",children:[{kind:"Meta",data:{"side-menu":"Block Side Menu","formatting-toolbar":"Formatting Toolbar","hyperlink-toolbar":{title:"Link Toolbar",display:"hidden"},"image-toolbar":{title:"Image Toolbar",display:"hidden"},"suggestion-menus":"Suggestion Menus"}},{kind:"MdxPage",name:"formatting-toolbar",route:"/docs/ui-components/formatting-toolbar",frontMatter:{title:"Formatting Toolbar",description:"The Formatting Toolbar appears whenever you highlight text in the editor.",imageTitle:"Formatting Toolbar",path:"/docs/formatting-toolbar"}},{kind:"MdxPage",name:"hyperlink-toolbar",route:"/docs/ui-components/hyperlink-toolbar",frontMatter:{title:"Link Toolbar",description:"The Link Toolbar appears whenever you hover a link in the editor.",imageTitle:"Link Toolbar",path:"/docs/link-toolbar"}},{kind:"MdxPage",name:"image-toolbar",route:"/docs/ui-components/image-toolbar",frontMatter:{title:"Image Toolbar",description:'The Image Toolbar appears whenever you select an image that doesn\'t have a URL, or when you click the "Replace Image" button in the Formatting Toolbar when an image is selected.',imageTitle:"Image Toolbar",path:"/docs/image-toolbar"}},{kind:"MdxPage",name:"side-menu",route:"/docs/ui-components/side-menu",frontMatter:{title:"Block Side Menu",description:"The Block Side Menu appears on the left side whenever you hover a block.",imageTitle:"Block Side Menu",path:"/docs/side-menu"}},{kind:"MdxPage",name:"suggestion-menus",route:"/docs/ui-components/suggestion-menus",frontMatter:{title:"Suggestion Menus",description:"Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items.",imageTitle:"Suggestion Menus",path:"/docs/slash-menu"}}]},{kind:"MdxPage",name:"ui-components",route:"/docs/ui-components",frontMatter:{title:"UI Components",description:"BlockNote includes a number of UI Components (like menus and toolbars) that can be completely customized.",imageTitle:"UI Components",path:"/docs/ui-components"}}]},{kind:"Folder",name:"examples",route:"/examples",children:[{kind:"Meta",data:{index:"Overview",basic:"Basic",backend:"Backend","ui-components":"UI Components",theming:"Theming",interoperability:"Interoperability","custom-schema":"Custom Schemas",collaboration:"Collaboration",extensions:"Extensions"}},{kind:"Folder",name:"backend",route:"/examples/backend",children:[{kind:"Meta",data:{"file-uploading":{title:"Upload Files"},"saving-loading":{title:"Saving & Loading"},s3:{title:"Upload Files to AWS S3"},"rendering-static-documents":{title:"Rendering static documents"}}},{kind:"MdxPage",name:"file-uploading",route:"/examples/backend/file-uploading"},{kind:"MdxPage",name:"rendering-static-documents",route:"/examples/backend/rendering-static-documents"},{kind:"MdxPage",name:"s3",route:"/examples/backend/s3"},{kind:"MdxPage",name:"saving-loading",route:"/examples/backend/saving-loading"}]},{kind:"Folder",name:"basic",route:"/examples/basic",children:[{kind:"Meta",data:{minimal:{title:"Basic Setup"},"block-objects":{title:"Displaying Document JSON"},"all-blocks":{title:"Default Schema Showcase"},"removing-default-blocks":{title:"Removing Default Blocks from Schema"},"block-manipulation":{title:"Manipulating Blocks"},"selection-blocks":{title:"Displaying Selected Blocks"},ariakit:{title:"Use with Ariakit"},shadcn:{title:"Use with ShadCN"},localization:{title:"Localization (i18n)"}}},{kind:"MdxPage",name:"all-blocks",route:"/examples/basic/all-blocks"},{kind:"MdxPage",name:"ariakit",route:"/examples/basic/ariakit"},{kind:"MdxPage",name:"block-manipulation",route:"/examples/basic/block-manipulation"},{kind:"MdxPage",name:"block-objects",route:"/examples/basic/block-objects"},{kind:"MdxPage",name:"localization",route:"/examples/basic/localization"},{kind:"MdxPage",name:"minimal",route:"/examples/basic/minimal"},{kind:"MdxPage",name:"removing-default-blocks",route:"/examples/basic/removing-default-blocks"},{kind:"MdxPage",name:"selection-blocks",route:"/examples/basic/selection-blocks"},{kind:"MdxPage",name:"shadcn",route:"/examples/basic/shadcn"}]},{kind:"Folder",name:"collaboration",route:"/examples/collaboration",children:[{kind:"Meta",data:{partykit:{title:"Collaborative Editing with PartyKit"},liveblocks:{title:"Collaborative Editing with Liveblocks"}}},{kind:"MdxPage",name:"liveblocks",route:"/examples/collaboration/liveblocks"},{kind:"MdxPage",name:"partykit",route:"/examples/collaboration/partykit"}]},{kind:"Folder",name:"custom-schema",route:"/examples/custom-schema",children:[{kind:"Meta",data:{"alert-block":{title:"Alert Block"},"suggestion-menus-mentions":{title:"Mentions Menu"},"font-style":{title:"Font Style"},"pdf-file-block":{title:"PDF Block"}}},{kind:"MdxPage",name:"alert-block",route:"/examples/custom-schema/alert-block"},{kind:"MdxPage",name:"font-style",route:"/examples/custom-schema/font-style"},{kind:"MdxPage",name:"pdf-file-block",route:"/examples/custom-schema/pdf-file-block"},{kind:"MdxPage",name:"suggestion-menus-mentions",route:"/examples/custom-schema/suggestion-menus-mentions"}]},{kind:"Folder",name:"extensions",route:"/examples/extensions",children:[{kind:"Meta",data:{"tiptap-arrow-conversion":{title:"TipTap extension (arrow InputRule)"}}},{kind:"MdxPage",name:"tiptap-arrow-conversion",route:"/examples/extensions/tiptap-arrow-conversion"}]},{kind:"MdxPage",name:"index",route:"/examples"},{kind:"Folder",name:"interoperability",route:"/examples/interoperability",children:[{kind:"Meta",data:{"converting-blocks-to-html":{title:"Converting Blocks to HTML"},"converting-blocks-from-html":{title:"Parsing HTML to Blocks"},"converting-blocks-to-md":{title:"Converting Blocks to Markdown"},"converting-blocks-from-md":{title:"Parsing Markdown to Blocks"}}},{kind:"MdxPage",name:"converting-blocks-from-html",route:"/examples/interoperability/converting-blocks-from-html"},{kind:"MdxPage",name:"converting-blocks-from-md",route:"/examples/interoperability/converting-blocks-from-md"},{kind:"MdxPage",name:"converting-blocks-to-html",route:"/examples/interoperability/converting-blocks-to-html"},{kind:"MdxPage",name:"converting-blocks-to-md",route:"/examples/interoperability/converting-blocks-to-md"}]},{kind:"Folder",name:"theming",route:"/examples/theming",children:[{kind:"Meta",data:{"theming-dom-attributes":{title:"Adding CSS Class to Blocks"},"changing-font":{title:"Changing Editor Font"},"theming-css":{title:"Overriding CSS Styles"},"theming-css-variables":{title:"Overriding Theme CSS Variables"},"theming-css-variables-code":{title:"Changing Themes Through Code"}}},{kind:"MdxPage",name:"changing-font",route:"/examples/theming/changing-font"},{kind:"MdxPage",name:"theming-css-variables-code",route:"/examples/theming/theming-css-variables-code"},{kind:"MdxPage",name:"theming-css-variables",route:"/examples/theming/theming-css-variables"},{kind:"MdxPage",name:"theming-css",route:"/examples/theming/theming-css"},{kind:"MdxPage",name:"theming-dom-attributes",route:"/examples/theming/theming-dom-attributes"}]},{kind:"Folder",name:"ui-components",route:"/examples/ui-components",children:[{kind:"Meta",data:{"ui-elements-remove":{title:"Removing UI Elements"},"formatting-toolbar-buttons":{title:"Adding Formatting Toolbar Buttons"},"formatting-toolbar-block-type-items":{title:"Adding Block Type Select Items"},"side-menu-buttons":{title:"Adding Block Side Menu Buttons"},"side-menu-drag-handle-items":{title:"Adding Drag Handle Menu Items"},"suggestion-menus-slash-menu-items":{title:"Adding Slash Menu Items"},"suggestion-menus-slash-menu-component":{title:"Replacing Slash Menu Component"},"suggestion-menus-emoji-picker-columns":{title:"Changing Emoji Picker Columns"},"suggestion-menus-emoji-picker-component":{title:"Replacing Emoji Picker Component"},"suggestion-menus-grid-mentions":{title:"Grid Mentions Menu"},"uppy-file-panel":{title:"Uppy File Panel"},"static-formatting-toolbar":{title:"Static Formatting Toolbar"},"custom-ui":{title:"UI With Third-Party Components"}}},{kind:"MdxPage",name:"custom-ui",route:"/examples/ui-components/custom-ui"},{kind:"MdxPage",name:"formatting-toolbar-block-type-items",route:"/examples/ui-components/formatting-toolbar-block-type-items"},{kind:"MdxPage",name:"formatting-toolbar-buttons",route:"/examples/ui-components/formatting-toolbar-buttons"},{kind:"MdxPage",name:"side-menu-buttons",route:"/examples/ui-components/side-menu-buttons"},{kind:"MdxPage",name:"side-menu-drag-handle-items",route:"/examples/ui-components/side-menu-drag-handle-items"},{kind:"MdxPage",name:"static-formatting-toolbar",route:"/examples/ui-components/static-formatting-toolbar"},{kind:"MdxPage",name:"suggestion-menus-emoji-picker-columns",route:"/examples/ui-components/suggestion-menus-emoji-picker-columns"},{kind:"MdxPage",name:"suggestion-menus-emoji-picker-component",route:"/examples/ui-components/suggestion-menus-emoji-picker-component"},{kind:"MdxPage",name:"suggestion-menus-grid-mentions",route:"/examples/ui-components/suggestion-menus-grid-mentions"},{kind:"MdxPage",name:"suggestion-menus-slash-menu-component",route:"/examples/ui-components/suggestion-menus-slash-menu-component"},{kind:"MdxPage",name:"suggestion-menus-slash-menu-items",route:"/examples/ui-components/suggestion-menus-slash-menu-items"},{kind:"MdxPage",name:"ui-elements-remove",route:"/examples/ui-components/ui-elements-remove"},{kind:"MdxPage",name:"uppy-file-panel",route:"/examples/ui-components/uppy-file-panel"}]}]},{kind:"MdxPage",name:"index",route:"/",frontMatter:{overrideTitle:"BlockNote - Javascript Block-Based React rich text editor",description:"A beautiful text editor that just works. Easily add an editor to your app that users will love. Customize it with your own functionality like custom blocks or AI tooling."}},{kind:"MdxPage",name:"pricing",route:"/pricing"}],flexsearch:!0,title:"Manipulating Inline Content",headings:r},pageNextRoute:"/docs/editor-api/manipulating-inline-content",nextraLayout:o.ZP,themeConfig:a.Z};t.default=(0,s.j)(d)}},function(e){e.O(0,[3751,1466,2888,9774,179],function(){return e(e.s=69457)}),_N_E=e.O()}]);