Store word context objects in variable

Question

Exploring word add-ins world. Want to create a list of paragraphs and navigate to each by click on it(some kind of table of content)

Like that:

I have created code(on reactjs, but it does not matter which framework to use) When I click on any button the callback is invoked, no errors in console, but the navigation does not happen. Question: How can I pass some context data between Word.run calls to achieve this kind of behavior?

import * as React from 'react'
import { useEffect, useState } from 'react'

const findAllParagraphs = async () => {
  return Word.run(context => {
    const contentControls = context.document.body.paragraphs.load('text')
    return context
      .sync()
      .then(() => contentControls.items)
  })
}

export const App = ({ isOfficeInitialized }) => {
  const [paras, setParas] = useState<any[]>([])

  useEffect(() => {
    const loadParagraphs = async () => {
      setParas(await findAllParagraphs())
    }
    if (isOfficeInitialized) {
      loadParagraphs()
    }
  }, [isOfficeInitialized])

  const navToPar = async (par: Word.Paragraph) => {
    return await Word.run(async context => {
      par.select()
      return await context.sync()
    })
  }

  const renderList = () => {
    return paras.filter(({ text }) => !!text).map((par: Word.Paragraph, i) => {
      return (
        <div>
          <button onClick={() => navToPar(par)} key={i}>
            {par.text.substr(0, 30)}...
          </button>
        </div>
      )
    })
  }

  return (<div>{renderList()}</div>)
}

Why not simply use the Navigation Pane in Word? --- http://www.addbalance.com/usersguide/styles.htm#Navigation_Pane -- http://addbalance.com/word/MovePages.htm — Charles Kenyon, Dec 20 '20 at 17:39
Cause in the end idea not to use paragraphs, but some specific anchors/bookmarks — Katya Pavlenko, Dec 21 '20 at 09:40
You can use the Style Separator to put two paragraph styles in the same logical paragraph. http://www.addbalance.com/usersguide/styles.htm#Style_Separator — Charles Kenyon, Dec 21 '20 at 16:18

score 1 · Accepted Answer · answered Dec 21 '20 at 20:24

1

Please import this snippet into Script Lab so you can run an example of how you can solve the problem.

The cited snippet is doing a search in a document (it searches for the text "Word"), it stores each result (range) in an array of ranges ("rangesAr") and it shows each one as an item in a listbox. Then you can select a range from the list and navigates to it. I think you can do something similar for paragraphs.

answered Dec 21 '20 at 20:24

Juan Balmori

4,898
1
8
17

this snippet does all inside one Word.run which I tried to avoid, but found yout it is impossible. So your approach looks good, thanks – Katya Pavlenko Dec 22 '20 at 16:34

score 0 · Answer 2 · answered Dec 20 '20 at 17:18

0

Found an answer on alike question Answer is: objects can not be reused, follow here for more

answered Dec 20 '20 at 17:18

Katya Pavlenko

3,303
3
16
28

score 0 · Answer 3 · answered Dec 21 '22 at 11:13

To add a table of contents (TOC) in a React application, you can follow these steps:

Install the react-markdown library, which allows you to parse Markdown and render it as React components:

npm install react-markdown

Import the react-markdown library in your React component:

Store word context objects in variable

3 Answers3