Search with ?{255} chunk.WORD.yaml

name: 'Search with ?{255} chunk'
description: ''
host: WORD
api_set: {}
script:
  content: >
    $("#row1Button").click(() => tryCatch(row1ButtonRun));

    $("#row2Button").click(() => tryCatch(row2ButtonRun));

    $("#row3Button").click(() => tryCatch(row3ButtonRun));


    $("#row4Button").click(() => tryCatch(row4ButtonRun));

    $("#row5Button").click(() => tryCatch(row5ButtonRun));


    $("#row6Button").click(() => tryCatch(row6ButtonRun));


    $("#row7Button").click(() => tryCatch(row7ButtonRun));

    $("#row8Button").click(() => tryCatch(row8ButtonRun));


    function getParagraphIndex() {
      return parseInt($("#paragraphIdx").val() as string);
    }


    async function row1ButtonRun() {
      await Word.run(async (context) => {
        await findRangeFromZeroToPosition(context, 7);
      });
    }


    async function row2ButtonRun() {
      await Word.run(async (context) => {
        await findRangeFromZeroToPosition(context, 34);
      });
    }


    async function row3ButtonRun() {
      await Word.run(async (context) => {
        const range_0_7 = await findRangeFromZeroToPosition(context, 7);
        const range_0_34 = await findRangeFromZeroToPosition(context, 34);

        const range_7_7 = range_0_7.getRange(Word.RangeLocation.end);

        const range_34_34 = range_0_34.getRange(Word.RangeLocation.end);

        const range_7_34 = range_7_7.expandTo(range_34_34);

        range_7_34.select();

        range_7_34.load("text");

        await context.sync();
        console.log(`range_7_34 text = ${range_7_34.text}`);
      });
    }


    async function row4ButtonRun() {
      await Word.run(async (context) => {
        await findRangeBySearchString(context, null, "?{300}", 4);
      });
    }


    async function row5ButtonRun() {
      await Word.run(async (context) => {
        await findRangeBySearchString(context, null, "?{255}?{45}", 4);
      });
    }


    async function row6ButtonRun() {
      await Word.run(async (context) => {
        await findRangeBySearchString(context, null, "?{255}?{255}?{50}", 4);
      });
    }


    async function row7ButtonRun() {
      await Word.run(async (context) => {
        await findRangeBySearchString(context, null, "?{255}?{255}?{255}?{24}", 6);
      });
    }


    async function row8ButtonRun() {
      await Word.run(async (context) => {
        let range1 = await findRangeBySearchString(context, null, "?{255}", 6);
        let range2 = await findRangeBySearchString(context, range1.getRange("End"), "?{255}", 6);
        await findRangeBySearchString(context, range2.getRange("End"), "?{50}", 6);
      });
    }


    async function findRangeFromZeroToPosition(context: Word.RequestContext,
    position: number) {
      const idx = getParagraphIndex();
      const body = context.document.body;
      body.paragraphs.load("items");

      await context.sync();

      const paragraph0 = body.paragraphs.items[idx];

      const searchString = `?{${position}}`;

      const range = paragraph0.search(searchString, { matchWildcards: true }).getFirst();

      range.select();

      range.load("text");

      await context.sync();

      console.log(`?{${position}} text = ${range.text}`);
      return range;
    }


    async function findRangeBySearchString(
      context: Word.RequestContext,
      rangeStart: Word.Range,
      searchString: string,
      idx: number | null = null
    ) {
      if (idx == null) {
        idx = getParagraphIndex();
      }

      const body = context.document.body;
      body.paragraphs.load("items");

      await context.sync();

      const paragraph0 = body.paragraphs.items[idx];

      let range: Word.Range | null = null;
      const timespan = Date.now();
      try {
        rangeStart = rangeStart || null;
        if (rangeStart) {
          range = rangeStart.expandTo(paragraph0.getRange("End"));
        } else {
          range = paragraph0.getRange();
        }

        range = range.search(searchString, { matchWildcards: true }).getFirstOrNullObject();

        range.load("isNullObject");

        await context.sync();
      } catch (error) {
        console.error(error);
        range = null;
      }
      const elapsedTime = (Date.now() - timespan) / 1000;

      console.log(`search("${searchString}") is finished, elapsed time: ${elapsedTime}s`);

      if (range != null && !range.isNullObject) {
        range.select();

        range.load("text");

        await context.sync();

        console.log(`${searchString} text = ${range.text}`);
      } else {
        console.log(`search("${searchString}") returns nullObject`);
      }
      return range;
    }


    /** Default helper for invoking an action and handling errors. */

    async function tryCatch(callback) {
      try {
        await callback();
      } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
      }
    }
  language: typescript
template:
  content: "<table class=\"ms-container\">\n\t<tr>\n\t\tFind(and select) the range in paragraph, that starts at position 7 and ends at position 34. The algorithm is\n\t\tbelow:\n\t\t<br/>\n\t</tr>\n\n\t\t<td width=\"70%\">\n\t\t\tParagraph index:\n\t\t</td>\n\t\t<td>\n\t\t\t<input type=\"text\" id=\"paragraphIdx\" value=\"0\">\n\t\t</td>\n\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\tStep 1. Find and select range that starts at position 0 and ends at position 7 in the 1st\n\t\t\tparagraph(range(0,7)) - via Search API\n\t\t</td>\n\t\t<td>\n\t\t\t<button id=\"row1Button\" class=\"ms-Button ms-right\">\n\t\t    <span class=\"ms-Button-label\">Run Step 1</span>\n\t\t\t</button>\n\t\t</td>\n\t</tr>\n\n\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\tStep 1. Find and select range that starts at position 0 and ends at position 34 in the 1st\n\t\t\tparagraph(range(0,34)) - via Search API\n\t\t</td>\n\t\t<td>\n\t\t\t<button id=\"row2Button\" class=\"ms-Button ms-right\">\n\t\t\t    <span class=\"ms-Button-label\">Run Step 2</span>\n\t\t\t\t</button>\n\t\t</td>\n\t</tr>\n\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\t1. range(0, 7) => range (7, 7)\n\t\t\t<br />\n\t\t\t2. range(0, 34) => range (34, 34)\n\t\t\t<br />\n\t\t\t3. range(7, 34) = expand range (7, 7) to range (34, 34)\n\n\t\t</td>\n\t\t<td>\n\t\t\t<button id=\"row3Button\" class=\"ms-Button ms-right\">\n\t\t\t\t    <span class=\"ms-Button-label\">Run Step 3</span>\n\t\t\t\t\t</button>\n\t\t</td>\n\t</tr>\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\t<br />\n\t\t\t<br />\n\t\t\t</td>\n\t\t<td>\n\n\t\t</td>\n\t</tr>\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\tSearchAPI throws error, if you try to find first 300 chars via \"?{300}\".\n\t\t</td>\n\t\t<td>\n\t\t\t<button id=\"row4Button\" class=\"ms-Button ms-right\">\n\t\t\t\t\t\t    <span class=\"ms-Button-label\">Run</span>\n\t\t\t\t\t</button>\n\t\t</td>\n\t</tr>\n\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\tSearchAPI works, if you try to find first 300 chars via \"?{255}?{45}\". (255 - is the max number!)\n\t\t</td>\n\t\t<td>\n\t\t\t<button id=\"row5Button\" class=\"ms-Button ms-right\">\n\t\t\t\t\t\t    <span class=\"ms-Button-label\">Run</span>\n\t\t\t\t\t</button>\n\t\t</td>\n\t</tr>\n\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\tSearchAPI hangs Word\n\t\t</td>\n\t\t<td>\n\t\t\t<button id=\"row6Button\" class=\"ms-Button ms-right\">\n\t\t\t\t\t<span class=\"ms-Button-label\">Run</span>\n\t\t\t\t</button>\n\t\t</td>\n\t</tr>\n\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\tSearchAPI crashes Word\n\t\t</td>\n\t\t<td>\n\t\t\t<button id=\"row7Button\" class=\"ms-Button ms-right\">\n\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Run</span>\n\t\t\t\t\t\t</button>\n\t\t</td>\n\t</tr>\n\n\t<tr>\n\t\t<td width=\"70%\">\n\t\t\tSearch with ?{255} followed by ?{255} with the returned range of previous search\n\t\t</td>\n\t\t<td>\n\t\t\t<button id=\"row8Button\" class=\"ms-Button ms-right\">\n\t\t\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Run</span>\n\t\t\t\t\t\t\t\t</button>\n\t\t</td>\n\t</tr>\n</table>"
  language: html
style:
  content: |

    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }

    .ms-container {
      width: 100%;
      border: 1px solid black;   
      border-collapse: collapse;
    }
    .ms-container td {
      border: 1px solid black;   
      border-collapse: collapse;
      padding: 5px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js

  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

  core-js@2.4.1/client/core.min.js
  @types/core-js

  jquery@3.1.1
  @types/jquery@3.3.1