Whenever the add-in is triggered, it checks whether the document contains any templates and if it does, it fetches the template from https://templates.accordproject.org/. For example, if a document contains [email protected], it will fetch the compiled archive from the above stated URL.

But, if someone has added a custom template, how do we initialize the document so that all the listeners are attached since we can't fetch it from https://templates.accordproject.org/? We somehow have to prompt the user to upload the compiled archive again so that our add-in can process it.

Discussion 🗣

Currently in the add-in, when we insert a template the variable values which are string have quotes wrapped around them which are included in their value. This quote is an extra one that gets inserted when the template is converted into ciceromark.
Since this is unintentional, it would be good to remove these extra quotation marks when the variable value is inserted into the document via an add-in.

Context

In the given image, I have outlined some of the variables which have extra quotes wrapped around them

Would you like to work on this?

Yes, I would like to work on this one.
EDIT: I have already found a solution for this.

Discussion 🗣

In this image, we can see that the template library is not the center. Also, there is an additional scroll that is of no use as visible beside each template.

Similarly, here there is no overflow when the sideload size is made small.

For small sideload size, we should provide overflow-x whereas, in the case of large screen sizes, we can center the template library to make it look better.

Context

The component which is responsible for rendering the templates comes from here.

Flag

If this is something that can be worked upon, then I will raise a corresponding issue in the linked repo

Would you like to work on the issue?

Yes

Currently, the details button redirect the user to the details page of templates hosted at https://templates.accordproject.org/. One suggestion is to render these details in the add-in itself. Anyone is welcome to think over this idea or present their own for this functionality.

Discussion 🗣

Testing for the existing ciceromark to ooxml transform using jest, chai, xml-js packages can be implemented which will enable easier debugging.

Context

Detailed Description

The XML generated in the document directly is slightly different from what is generated upon transformation. Details such as font properties exist in the XML document while they aren't present when the ciceromark is transformed to XML, hence it must be taken care of.
To avoid any indentation, whitespace, and other problems that lead to failing the test cases, the xml-js package needs to be used.
Error is received at Word.Style.heading1 in

Reproduce

1. Side-load the add-in on the web version by following these steps.
2. You will receive the following error.
   

Although the development can continue on the Desktop version, I believe this is an important issue to look into too because on browser we will be able to access Developer Tools to debug JavaScript better. This is absent on the desktop version.

Bug Report 🐛

Currently, the dependencies installed are old. As a result, there occurs an error when inserting the template.

Expected Behavior

The template should be inserted.

Current Behavior

The above error shows

Possible Solution

Updating the major dependencies of the project.

Context (Environment)

Desktop

• OS: Windows 10
• Text Editor: MS-Word
• Version: OS-Build: 19042.867, Word-Office 365 v2103

would you like to work on the issue?

YES

Feature Request 🛍️

Pre-commit hooks should be integrated into the project to prevent the push of bad code( not linted properly and others).

Context

Currently, if someone pushes the code into the repo which is not properly linted there is no check on it. This can cause inconsistencies in code. This feature would prevent this from happening.

Detailed Description

Some info regarding the pre-commit hooks

Feature Request 🛍️

Due to an update of the Edge Chromium, the current debug method for add-in is facing issues. Basically, the add-in reloads after 5 seconds if the debugger is attached to it. A new debug method can be used for such cases.

Use Case

Debugging is an important part of development so the debugger should work.

Possible Solution

Using this we can implement a solution.

Context

Whenever an update occurs, there might occur similar changes which lead to breaking the working of debugging the add-in. In such cases, one can opt the other method to debug and continue the work.

Detailed Description

A launch.json file would need to be created along with some documentation changes for the same describing its working.

Would you like to work on the issue??

Yes

We need to restrict user to upload templates with unique identifier. This will help us re-attaching the listeners more efficiently.

To explain this more briefly, I will elaborate on how the listeners get attached in the first place.

1. Whenever a template is added for the first time, the template identifier is stored, as CustomXMPart, in the document which looks something like this:

   <?xml version="1.0" encoding="utf-8" ?>
   <templates xmlns="https://accordproject.org/">
     <template xmlns="[email protected]" />
     ...
   </templates>

   If [email protected] is added two times, the xml will not show two occurrences of <template xmlns="[email protected]" />. (This is purposely added because I thought it may unnecessarily populate the XML)

2. When the Add-in is opened, it iterates over this XML and fetches the corresponding compiled archives and list down the variables they contain.

   ["Shipper1", "Receiver1", "Deliverable1", "Receiver2", "Shipper2", "Deliverable2", "Receiver3", "BusinessDays1", "Deliverable3", "Shipper3", "Deliverable4", "Deliverable5", "Shipper4", "Attachment1"]

3. A function then iterates over this list and add listener to the content control if it is also present in the above list.

The problem here is that we don't have a way to enumerate the times a template exists in the document. But I suggest three approaches for this:

1. Remove the check for uniqueness in the XML.
2. Generate the XML something like this:

   <?xml version="1.0" encoding="utf-8" ?>
   <templates xmlns="https://accordproject.org/">
     <template xmlns="[email protected]">3</template>
     ...
   </templates>

   not sure if one will be able to query the XML properly.

3. Add a function to restrict user to add templates with unique identifier.

Bug Report 🐛

Upload your template button not working.

Expected Behavior

Clicking on the Upload your template button and selecting a template should render that particular template (.cta) file on the document.

Current Behavior

Clicking on the Upload your template button and selecting a template does nothing.

Steps to Reproduce

1. You can download a .cta file for any template from here.
2. Get the add-in working and click on the `Upload your template button
3. Select that downloaded .cta file.
4. That template file should get rendered on the document but nothing happens.

Context (Environment)

Desktop

• OS: Windows 10
• Browser: Chrome
• Version 88.0.4324.182 (Official Build) (64-bit)

Bug Report 🐛

Previously there was a button for uploading a custom template in the add-in

But now due to update accordproject/ui-components from ^0.93.2-20200730175739 to ^0.97.0 hence the current add-in looks like this

As a result of this, we can't upload custom templates to the document through the add-in.

Steps to Reproduce

1. Run the add-in and see that currently there is a button named "Add a new library item" click on it nothing happens

For Testing purpose I had done this:

1. Uninstall the @accordproject/ui-components by npm uninstall @accordproject/ui-components
2. Install the previous version by npm i @accordproject/ui-components@^0.93.2-20200730175739
3. Now run the add-in again it works as it used to work before, I had even uploaded [[email protected]](https://templates.accordproject.org/[email protected]) template and it was uploaded successfully

Context (Environment)

Desktop

• OS: Windows 10
• Browser: Chrome
• MS Word Version: 2016

Bug Report 🐛

Currently, the custom XML namespace when a template is inserted is persistent i.e. it does not change when a template is removed from the document.

Expected Behavior

When we remove a template from the document, the XML of the templateIdentifier stored in custom XML should also get removed.
The XML looks similar to this.

<?xml version="1.0" encoding="utf-8" ?>
<templates xmlns="https://accordproject.org/">
  <template xmlns="[email protected]" />
  ...
</templates>

If one deletes the template acceptance-of-delivery then this identifier should also get removed.

Current Behavior

The identifier remains there and is not deleted.

Possible Solution

We should remove the identifiers whenever a template is deleted.

Steps to Reproduce

After the add-in server is running and the npm start command is entered.

1. Insert any 2 different templates.
2. Save the document as WORD XML format.
3. Now open the XML in any editor(Vs-Code, atom) and see the identifier of 2 different templates. (find for <template xmlns in the file)
4. 2 different occurrences will be found
5. Now in the document delete any of the templates and save the document as XML format.
6. Repeat step 3.
7. Still two different occurrences are found.

Context (Environment)

Desktop

• OS: Windows 10
• Text Editor: MS-Word
• Version: OS-Build: 19042.867, Word-Office 365 v2103

Detailed Description

The change will ensure that only those identifiers are present whose templates are present in the document.

Possible Implementation

According to this, there is a content-control onDeleted which we can use to delete the identifier of the template.

Would you like to work on the issue?

Yes

Docstrings should be added for all the functions in the add-in. This will allow us to prevent issues such as #35. Moreover, adding docstrings should be enforced by using some eslint configuration.

Bug Report 🐛

Single Quotes in eslint's command pattern causes error while linting

Why are these quotes needed?

Originally posted by @algomaster99 in this comment

Expected Behavior

Running the npm run lint or npm run lint:fix commands, eslint should work properly and/or fix any linting errors if present.

Current Behavior

As single quotes are added to the eslint's command pattern it causes the following error:

PS D:\Github\cicero-word-add-in> npm run lint:fix

> [email protected] lint:fix
> eslint '**/*.{js,jsx}' --fix     


Oops! Something went wrong! :(
ESLint: 7.1.0

No files matching the pattern "'**/*.{js,jsx}'" were found.
Please check for typing mistakes in the pattern.

PS D:\Github\cicero-word-add-in> 

As you can see the eslint was unable to find the files due to a typo in the pattern.

Possible Solution

I had removed the quotes and it works fine, for example I had intentionally created some error to see if eslint works fine or not

PS D:\Github\cicero-word-add-in> npm run lint:fix

> [email protected] lint:fix
> eslint **/*.{js,jsx} --fix       


D:\Github\cicero-word-add-in\src\components\TemplateLibrary\index.js
  17:14  error  Parsing error: Const declarations require an initialization value

  15 | const XML_HEADER = '<?xml version="1.0" encoding="utf-8" ?>';
  16 |
> 17 | const example;
     |              ^
  18 |
  19 | /**
  20 |  * Template library Renderer.

✖ 1 problem (1 error, 0 warnings)

PS D:\Github\cicero-word-add-in> 

I can create a PR for this if needed :)

Bug Report 🐛

When npm run validate is run, It gives the following message:

PS D:\Github\cicero-word-add-in> npm run validate

> [email protected] validate
> office-addin-manifest validate manifest.xml

The manifest is not valid.


Error # 1: 
Localhost Manifest Icon URL: The manifest icon URL should not be localhost.
  - Details: https://localhost:3000/assets/ap-48.png

Additional information: 
Package Type Identified: Package of your add-in was parsed successfully.

Correct Package: Your package matches the submission type.

Valid Manifest Schema: Your manifest does adhere to the current set of XML schema definitions for Add-in manifests.

Manifest Version Correct Structure: The manifest version number has the correct structure for the platform that it supports.

Manifest Version Correct Value: The manifest version number is greater or equal to 1.0.

Manifest ID Valid Prefix: The product ID in the manifest has a valid prefix
  - Details: 99ea9ad2-971a-46ad-99d1-190379478cb9

Manifest ID Correct Structure: The structure of the product ID is correct.
  - Details: 99ea9ad2-971a-46ad-99d1-190379478cb9

Desktop Source Location Present: A desktop or default source location URL is found.

Secure Desktop Source Location: The manifest desktop source location URLs use HTTPS.

Supported Office Identified: Supported Office products were successfully determined.

Support URL Present: The manifest support URL is present.
  - Details: https://www.contoso.com/help

Valid Support URL: The manifest support URL is valid.

Icon Present: A icon element was expected and is present.
  - Details: https://localhost:3000/assets/ap-48.png

Supported Icon URL File Extension: The manifest icon URL has a valid image file extension.
  - Details: png

The manifest icon URL uses HTTPS.: Secure Icon URL
  - Details: https://localhost:3000/assets/ap-48.png

Acceptance Test Completed: Acceptance test service has finished checking provided add-in.

PS D:\Github\cicero-word-add-in>

The manifest.xml is not valid because of the error of the Icon URL which is from the localhost

Expected Behavior

After running the npm run validate command, the validation should be passed

Current Behavior

It fails due to LocalHost Icon URL error

Possible Solution

A possible solution might be hosting those logo's on the server and then using a link similar to this:
"https://LoremIspum/Images/ap-16.png" for Icon URL

Steps to Reproduce

1. Run npm run validate

Context (Environment)

Although this is not causing any issues right now, but since we want to publish Add-in in MS-Word's catalog, the manifest.xml should be valid and this issue should be fixed beforehand.

Desktop

• OS: Windows 10[e.g. macOS]

Discussion 🗣

Adding CONTRIBUTNG.md and DEVELOPERS.md files in the repo similar to other Accord Project's repositories
These files will point out to techdocs CONTRIBUTNG.md and DEVELOPERS.md respectively

Also, we can add Cicero-word-add-in specific information in them similar to what it is done in Cicero's CONTRIBUTNG.md

I would like to create a PR for this if needed

An alternate way to restrict editing of contents of the content control.

Discussion 🗣

Instead of the chunk of code here (111-119), we can probably use this API to do the same. Not sure how will this integrate but we can try if using this API works out.

Discussion 🗣

Integrating Github Actions :

Currently, after the latest commits, you may notice that the master branch have some linting errors as follows :

PS D:\Github\cicero-word-add-in> npm run lint

> [email protected] lint
> eslint src/**/*.{js,jsx}     


D:\Github\cicero-word-add-in\src\components\TemplateLibrary\index.js    
  218:15  error  Expected space(s) after "if"        keyword-spacing    
  218:36  error  Missing space before opening brace  space-before-blocks
  230:16  error  Expected space(s) before "else"     keyword-spacing    
  230:16  error  Expected space(s) after "else"      keyword-spacing    

✖ 4 problems (4 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.  

For this, we may use Github Actions for this repo same as we have it for another Accord Project's repositories, where we will check the Lint checks and maybe also have an auto-fix option for the errors caused in PR

I have explored some solutions for this and found these two references to be useful :

1. Normal Es-lint check - https://github.com/marketplace/actions/run-eslint
2. Auto-fixing eslint issues - https://github.com/marketplace/actions/lint-action

Currently, we are just using ESlint if in the future we may try to Integrate Prettier with Eslint then Github Actions would help us in the same

There is an open issue #46 related to pre-commit hooks that may solve this problem but if this idea of integrating Github Actions sounds good then I would like to contribute to this if needed

Related issues for Github actions in other repositories : cicero-template-library/issues/379, technical-steering-committee/issues/4

Feature Request 🛍️

Use Case

When the add-in has some problem or if a user gets any problem with the add-in, the user will click on the get support option here
Scenario 1: When the add-in is working properly, but the user notices some error

Scenario 2: when the add-in gets the error

but currently, we have contoso.com/help as the default support link

Possible Solution

A possible solution will be to redirect the user to this link:
https://github.com/accordproject/cicero-word-add-in/issues/new?assignees=&labels=&template=custom-issue.md&title=
So that he can create an issue on GitHub and then maintainers can help him...
I was also thinking of pointing the user to some FAQ's where he might get his queries resolved but currently, we are not having any documentation hence pointing the user to create an issue would be better

I would like to make PR for this if this is a valid issue :)