[Item] A slightly modified version of annotation collection by color

[LynnXie00]

**Guys, I updated the scripts. With the new Zotero and Better Notes, for some reason the script can't import annotations that contains images anymore. (I'm not a programmer and that's all I can do lol.... So you probably need to import images into zotero notes this manually. But other part works fine for me. **

Type: Item
Description: This template map certain colors with certain meanings in annotations.
I use gray for purpose, yellow for general, red for attention, green for hypotheses, blue for theory, purple for method, magenta for results, orange for contribution.
You may change this code to change your own color style.

  const colors = ["#aaaaaa","#ffd400", "#ff6666", "#5fb236", "#2ea8e5", "#a28ae5","#e56eee","#f19837"];
  const colorNames = ["💡Purpose","🖌️General & Images", "❗Attention", "❓Hypotheses", "📚Theory", "⛏️Method","📝Results","👍Contribution"];

How to use it:

Showcase result:

Template Contents:

${await new Promise(async (r) => {
/*functions */
	async function getAnnotation(item) {
		
		if (!item || !item.isAnnotation()) {
			return null;
		}
		let json = await Zotero.Annotations.toJSON(item);
		json.id = item.key;
		delete json.key;
		for (let key in json) {
			json[key] = json[key] || "";
		}
		json.tags = json.tags || [];
		return json;
	}

	async function getAnnotationsByColor(_item, colorFilter) {
		const annots = _item.getAnnotations().filter(colorFilter);
		if (annots.length === 0) {
		  return {
			html: "",
		  };
		}
		let annotations = [];
		for (let annot of annots) {
		  const annotJson = await getAnnotation(annot);
		  annotJson.attachmentItemID = _item.id;
		  annotations.push(annotJson);
		}
	return Zotero.EditorInstanceUtilities.serializeAnnotations(annotations);
	}

	/*constants */
	const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
	i.isPDFAttachment()
	);
	let res = `<h1>${topItem.getField("title")}</h1>`;
	const colors = ["#aaaaaa","#ffd400", "#ff6666", "#5fb236", "#2ea8e5", "#a28ae5","#e56eee","#f19837"];
	const colorNames = ["💡Purpose","🖌️General", "❗Attention", "❓Hypotheses", "📚Theory", "⛏️Method","📝Results","👍Contribution"];
	
	/*loop each attachment */
	try {  
	  for (let attachment of attachments) {
		res += `<h2>📄For Document:${attachment.attachmentFilename}</h2>`;
		for (let i in colors) {
		  const renderedAnnotations = (
			await getAnnotationsByColor(
			  attachment,
			  (_annot) => _annot.annotationColor === colors[i]
			)
		  ).html;
		  if (renderedAnnotations) {
			res += `<h3><p style="background-color:${colors[i]};">${colorNames[i]}</p></h3>\n${renderedAnnotations}`;
		  }
		}
		
		const renderedAnnotations = (
		  await getAnnotationsByColor(
			attachment,
			(_annot) => !colors.includes(_annot.annotationColor)
		  )
		).html;
		
		if (renderedAnnotations) {
		  res += `<h2><p>Other Annotations</p></h2>\n${renderedAnnotations}`;
		}
	  }
	  	r(res);
	  
		} catch (e) {
			Zotero.logError(e);
    }
})}

---

I'd greatly appreciate it if anyone knows how to improve the codes...

In the old script there's one line:

await editor.importImages(annotations);

and Zotero gives an error now saying importImages is not a function...no idea how to fix it so I deleted it...

[HPDell]

The following version works in the latest Zotero. If you encounter problems (e.g., annotations won't show) when using the above version, please try this one.

${await new Promise (async (r) => {
  async function getAnnotation(item) {
    try {
      if (!item || !item.isAnnotation()) {
        return null;
      }
      let json = await Zotero.Annotations.toJSON(item);
      json.id = item.key;
      delete json.key;
      for (let key in json) {
        json[key] = json[key] || "";
      }
      json.tags = json.tags || [];
      return json;
    } catch (e) {
      Zotero.logError(e);
      return null;
    }
  }

  function getEditorInstance(noteId) {
    return Zotero.Notes._editorInstances.find(
      (e) =>
        e._item.id === noteId && !Components.utils.isDeadWrapper(e._iframeWindow)
    );
  }

  async function getAnnotationsByColor(_item, color) {
    const annots = _item.getAnnotations().filter(item => item.annotationColor === color);
    if (annots.length === 0) {
      return {
        html: "",
      };
    }
    let annotations = [];
    for (let annot of annots) {
      const annotJson = await getAnnotation(annot);
      annotJson.attachmentItemID = _item.id;
      annotations.push(annotJson);
    }

    let editor = getEditorInstance(targetNoteItem.id)
    if (!editor) {
      alert("No active note editor detected. Please open workspace.");
      return r("");
    }
    await editor.importImages(annotations);
    return Zotero.EditorInstanceUtilities.serializeAnnotations(annotations);
  }

  const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
    i.isPDFAttachment()
  );

  let res = `<h1>${topItem.getField("title")}</h1>`;

  const colors = {
    "#aaaaaa": "💡Purpose",           // Grey
    "#ffd400": "🖌️General & Images",  // Yellow
    "#ff6666": "❗Attention",         // Red
    "#5fb236": "❓Hypotheses",        // Green
    "#2ea8e5": "📚Theory",            // Blue
    "#a28ae5": "⛏️Method",            // Purple
    "#e56eee": "📝Results",           // Magenta
    "#f19837": "👍Contribution"       // Orange
  }
  for (const attachment of attachments) {
    res += `<h2>📄For Document:${attachment.attachmentFilename}</h2>`;
    for (const color in colors) {
      if (Object.hasOwnProperty.call(colors, color)) {
        const colorName = colors[color];
        const renderedAnnotations = (await getAnnotationsByColor(attachment, color)).html;
        if (renderedAnnotations) {
          res += `<h3><p style="background-color:${color};">${colorName}</p></h3>\n${renderedAnnotations}`;
        }
      }
    }
    const renderedAnnotations = (
      await getAnnotationsByColor(
        attachment,
        (_annot) => !colors.includes(_annot.annotationColor)
      )
    ).html;
    if (renderedAnnotations) {
      res += `<h2><p>Other Annotations</p></h2>\n${renderedAnnotations}`;
    }
  }
  r(res);
})}

The problem is caused by variable editor which is (possibly) undefined. As the add-on pass the targetNoteItem to the template, the real value of editor can be extracted from Zotero API through this function

function getEditorInstance(noteId) {
  return Zotero.Notes._editorInstances.find(
    (e) =>
      e._item.id === noteId && !Components.utils.isDeadWrapper(e._iframeWindow)
  );
}

Then just call it to get the editor before using it

+   let editor = getEditorInstance(targetNoteItem.id)
    if (!editor) {
      alert("No active note editor detected. Please open workspace.");
      return r("");
    }
    await editor.importImages(annotations);

[butterflyli]

Thank you very much, this code could run correctly.Also, I wonder what the ItemNotes used in the previous version was replaced with? It makes my other template not working properly

[Guan9Wu]

Your template is still work? Mine is broken in the latest version zotero. There is only a empty note be generated.

[HPDell]

@butterflyli I suppose the editor used to be passed from the plugin in previous versions. But now only ``targetNoteItem` is passed. This change caused problems.

[HPDell]

I'm afraid the template is not working. Maybe something changed again.

[windingwind]

@HPDell Yes, you'll need to update the template. see https://github.com/windingwind/zotero-better-notes/blob/master/docs/about-note-template.md#write-note-template

[butterflyli]

Yes,my template is still work well. My zotero’s vesion is 6.0.26. And my Zotero Better Notes‘ version is 1.0.4. But I encountered a few times that an empty note was generated. It might be related to the steps you take to create notes. After you make annotations on the paper, you should first create a new Item note from Zotero Better Notes. Then, you will get an empty note, please don’t give up. You should click the gear icon, then choose the ‘Insert template at cursor’ Finally, you will get the right note with  annotations grouped by color I hope my experience can help you. 从 Windows 版邮件发送 发件人: Gino 发送时间: 2023年6月13日 1:40 收件人: windingwind/zotero-better-notes 抄送: butterflyli; Comment 主题: Re: [windingwind/zotero-better-notes] [Item] A slightly modifiedversion of annotation collection by color (Discussion #406) Your template is still work? Mine is broken in the latest version zotero. There is only a empty note be generated. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[Guan9Wu]

Thans for your reply. I kown why I have this problem:

Your template is still work? Mine is broken in the latest version zotero. There is only a empty note be generated.

Before I use template for generating notes, I haven't set the note as Workspace note.
Notably, if you click the "+" buttom at the right left of right sidebar to create an new empty note, then go back, you will find noting be created in Item Notes. I think this is a bug need to fix, because an new empty can be created in the library directory.

[windingwind]

editor is no longer available in the latest version. There is no promise that an editor of target note exists, so it is removed.

[npj06]

how to import this template correctly when I countered a notice “the copied template is invalid”，thanks for your help

[windingwind]

#406 (comment)

[windingwind]

Use this, based on @HPDell :

One-click to import.

1. Copy the template below.

Click to show the template

name: "[Item] A slightly modified version of annotation collection by color"
content: |-
  // @author LynnXie00, HPDell, and windingwind 
  // @link https://github.com/windingwind/zotero-better-notes/discussions/406
  ${{
  async function getAnnotationsByColor(_item, color) {
    const annots = _item
      .getAnnotations()
      .filter((item) => item.annotationColor === color);
    if (annots.length === 0) {
      return "";
    }
    return Zotero.BetterNotes.api.convert.annotations2html(annots, {
      noteItem: targetNoteItem,
    });
  }

  const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
    i.isPDFAttachment()
  );

  let res = `<h1>${topItem.getField("title")}</h1>`;

  const colors = {
    "#aaaaaa": "💡Purpose", // Grey
    "#ffd400": "🖌️General & Images", // Yellow
    "#ff6666": "❗Attention", // Red
    "#5fb236": "❓Hypotheses", // Green
    "#2ea8e5": "📚Theory", // Blue
    "#a28ae5": "⛏️Method", // Purple
    "#e56eee": "📝Results", // Magenta
    "#f19837": "👍Contribution", // Orange
  };
  for (const attachment of attachments) {
    res += `<h2>📄For Document:${attachment.attachmentFilename}</h2>`;
    for (const color in colors) {
      if (Object.hasOwnProperty.call(colors, color)) {
        const colorName = colors[color];
        const renderedAnnotations = await getAnnotationsByColor(
          attachment,
          color
        );
        if (renderedAnnotations) {
          res += `<h3><p style="background-color:${color};">${colorName}</p></h3>\n${renderedAnnotations}`;
        }
      }
    }
    const renderedAnnotations = await getAnnotationsByColor(
      attachment,
      (_annot) => !colors.includes(_annot.annotationColor)
    );
    if (renderedAnnotations) {
      res += `<h2><p>Other Annotations</p></h2>\n${renderedAnnotations}`;
    }
  }
  return res;
  }}$

2. Goto Zotero menubar, click Edit->New Template from Clipboard.
3. Click OK.

[windingwind]

@AaronLiu0916 please take a screenshot of your template editor window.

[AaronLiu0916]

This is the template editor window and the note generated for an article. I modified the code from the reply of HPDell of May, 2023 by simply changing the annotation colors:

const colors = {
"#ffdd83": "Introduction", //y
"#c0797d": "Highlight", //r
"#91aa9d": "Method", //g
"#ffcf79": "Result", //o
"#ada2ff": "Question", //p
"#a4c9ed": "Word", //db
"#c8edec": "Sentence", //lb
"#FFD2D2": "Ref" //pnk
}

[AaronLiu0916]

@windingwind Sorry I did not reply, the answer was put above

[windingwind]

What's your Zotero version & plugin version? Also, we need the full template code. (Reply with the template code in the code block so that it won't be recognized as markdown by GitHub)

[AaronLiu0916]

@windingwind My Zotero Version is 6.0.37 with Better Notes 1.0.4. In previous replies, I found @Guan9Wu had successfully set up the template with a lower version than required, so I decided to try out.

The whole code was attached below:

${await new Promise (async (r) => {
  async function getAnnotation(item) {
    try {
      if (!item || !item.isAnnotation()) {
        return null;
      }
      let json = await Zotero.Annotations.toJSON(item);
      json.id = item.key;
      delete json.key;
      for (let key in json) {
        json[key] = json[key] || "";
      }
      json.tags = json.tags || [];
      return json;
    } catch (e) {
      Zotero.logError(e);
      return null;
    }
  }

  function getEditorInstance(noteId) {
    return Zotero.Notes._editorInstances.find(
      (e) =>
        e._item.id === noteId && !Components.utils.isDeadWrapper(e._iframeWindow)
    );
  }

  async function getAnnotationsByColor(_item, color) {
    const annots = _item.getAnnotations().filter(item => item.annotationColor === color);
    if (annots.length === 0) {
      return {
        html: "",
      };
    }
    let annotations = [];
    for (let annot of annots) {
      const annotJson = await getAnnotation(annot);
      annotJson.attachmentItemID = _item.id;
      annotations.push(annotJson);
    }

    let editor = getEditorInstance(targetNoteItem.id)
    if (!editor) {
      alert("No active note editor detected. Please open workspace.");
      return r("");
    }
    await editor.importImages(annotations);
    return Zotero.EditorInstanceUtilities.serializeAnnotations(annotations);
  }

  const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
    i.isPDFAttachment()
  );

  let res = `<h1>${topItem.getField("title")}</h1>`;

  const colors = {
   "#ffdd83": "Introduction", //y      
    "#c0797d": "Highlight", //r
    "#91aa9d": "Method",   //g
    "#ffcf79": "Result",  //o
    "#ada2ff": "Question",  //p
    "#a4c9ed": "Word",  //db
    "#c8edec": "Sentence",  //lb
    "#FFD2D2": "Ref"   //pnk
  }
  for (const attachment of attachments) {
    res += `<h2>📄For Document:${attachment.attachmentFilename}</h2>`;
    for (const color in colors) {
      if (Object.hasOwnProperty.call(colors, color)) {
        const colorName = colors[color];
        const renderedAnnotations = (await getAnnotationsByColor(attachment, color)).html;
        if (renderedAnnotations) {
          res += `<h3><p style="background-color:${color};">${colorName}</p></h3>\n${renderedAnnotations}`;
        }
      }
    }
    const renderedAnnotations = (
      await getAnnotationsByColor(
        attachment,
        (_annot) => !colors.includes(_annot.annotationColor)
      )
    ).html;
    if (renderedAnnotations) {
      res += `<h2><p>Other Annotations</p></h2>\n${renderedAnnotations}`;
    }
  }
  r(res);
})}

[yuanyuanfka]

怎么下线这个插件啊友友们

[anyu543937321]

This note template is very useful, and I've modified the colors of the annotations to match my reading preferences. However, I'm wondering if it's possible to also make the text color in the notes consistent with the annotation colors.

// @author LynnXie00, HPDell, and windingwind
// @link #406
${{
async function getAnnotationsByColor(_item, color) {
const annots = _item
.getAnnotations()
.filter((item) => item.annotationColor === color);
if (annots.length === 0) {
return "";
}
return Zotero.BetterNotes.api.convert.annotations2html(annots, {
noteItem: targetNoteItem,
});
}

const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
i.isPDFAttachment()
);

let res = <h1>${topItem.getField("title")}</h1>;

const colors = {

"#ffd400": "🖌️Overview", // Yellow
"#e56eee": "❓Key Issues", // Magenta
"#f19837": "🔨Methodology", // Orange
"#2ea8e5": "🏡Framework", // Blue
"#ff6666": "🤔Viewpoint", // Red
"#aaaaaa": "📝Conclusion", // Grey
"#5fb236": "📚Reference", // Green
"#a28ae5": "🆕New words", // Purple
};
for (const attachment of attachments) {
res += <h2>📄For Document:${attachment.attachmentFilename}</h2>;
for (const color in colors) {
if (Object.hasOwnProperty.call(colors, color)) {
const colorName = colors[color];
const renderedAnnotations = await getAnnotationsByColor(
attachment,
color
);
if (renderedAnnotations) {
res += <h3><p style="background-color:${color};">${colorName}</p></h3>\n${renderedAnnotations};
}
}
}
const renderedAnnotations = await getAnnotationsByColor(
attachment,
(_annot) => !colors.includes(_annot.annotationColor)
);
if (renderedAnnotations) {
res += <h2><p>Other Annotations</p></h2>\n${renderedAnnotations};
}
}
return res;
}}$

[ititiy]

可以直接右上角设置了现在

[DocRuzzy]

Thanks so much for this template! I modified it for my own color coding (which also includes colors used by the Boox Neoreader)

// @author LynnXie00, HPDell, and windingwind 
// @link https://github.com/windingwind/zotero-better-notes/discussions/406
${{
async function getAnnotationsByColor(_item, color) {
  const annots = _item
    .getAnnotations()
    .filter((item) => item.annotationColor === color);
  if (annots.length === 0) {
    return "";
  }
  return Zotero.BetterNotes.api.convert.annotations2html(annots, {
    noteItem: targetNoteItem,
  });
}

const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
  i.isPDFAttachment()
);

let res = `<h1>${topItem.getField("title")}</h1>`;

const colors = {
  "#ffd400": "⭐ Interesting point, Facts, Examples, References", // Yellow
  "#FFF0FF00": "⭐ Interesting point, Facts, Examples, References", // Yellow neoreader
  "#5fb236": "🧪 Main findings, Results, Conclusions", // Green
  "#FF00B036": "🧪 Main findings, Results, Conclusions", // Green neoreader
  "#f19837": "❓Assumptions, Questions, Goals, Problems, challenges", // Orange
  "#FFFFAA00": "❓Assumptions, Questions, Goals, Problems, challenges", // Orange neoreader
  "#2ea8e5": "⚗️Experimental Details or Methods", // Blue
  "#FF00F0FF": "⚗️Experimental Details or Methods", // Blue neoreader
  "#a28ae5": "♐ Supporting Argument or Example", // Purple
  "#FF9338BE": "♐ Supporting Argument or Example", // Purple neoreader
  "#ff6666": "⛔ Contrary/Null Example or Argument", // Red
  "#FFFF6163": "⛔ Contrary/Null Example or Argument", // Red neoreader
  "#aaaaaa": "🗃️ Vocabulary, Names, Dates, Definitions", //gray
  "#FFC0C0C0": "🗃️ Vocabulary, Names, Dates, Definitions", //gray neoreader
  "#e56eee": "🧠 Background information, Prerequisites", // Magenta
  "#FFEE00FF": "🧠 Background information, Prerequisites", // Magenta neoreader
  "#FF00AAFF": "🎇 applications", //sky blue neoreader
  "#FFFF4400": "⚠️ Disagree with author", //orange red neoreader
  "#FF808080": "Notable references", //medium gray neoreader
  "#FFFFFFFF": "🤐 hidden", //white neoreader
};
for (const attachment of attachments) {
  res += `<h2>📄For Document:${attachment.attachmentFilename}</h2>`;
  for (const color in colors) {
    if (Object.hasOwnProperty.call(colors, color)) {
      const colorName = colors[color];
      const renderedAnnotations = await getAnnotationsByColor(
        attachment,
        color
      );
      if (renderedAnnotations) {
        res += `<h3><p style="background-color:${color};">${colorName}</p></h3>\n${renderedAnnotations}`;
      }
    }
  }
  const renderedAnnotations = await getAnnotationsByColor(
    attachment,
    (_annot) => !colors.includes(_annot.annotationColor)
  );
  if (renderedAnnotations) {
    res += `<h2><p>Other Annotations</p></h2>\n${renderedAnnotations}`;
  }
}
return res;
}}$

[Geo123abc]

thanks, can you tell me how to modify zotero's default highlight color?

[kepbod]

每次如果annotation 更新了，note 也更着更新或者有快捷键点一下就更新就好了。

[MarvinGrossie]

Hi, great template! But when adding an annotation to notes, is it possible to automatically quote the highlighted text and place the note of the highlighted text in a new paragraph?

[kepbod]

Or we can add an action to update the note (maybe delete the old one and add a new one)?

[danieltregeagle]

Hi, great template! But when adding an annotation to notes, is it possible to automatically quote the highlighted text and place the note of the highlighted text in a new paragraph?

You can modify the appearance of pdf highlights and notes using note templates. See this thread for an example.

[oliverkuehle]

Seems not to be working with the recent zotero versions.
I would greatly appreciate if somebody could share a working fix for the zotero 7 beta 🙏